首页 专题 H5案例 前端导航 UI框架

纯CSS实现吸顶效果

作者:TG 日期: 2018-06-08 阅读: 2220
吸顶效果,顾名思义,就是当元素靠近顶部时,自动固定在顶部。


常用场景
导航栏
字母列表

要实现导航吸顶效果,我们一般使用的是监听scroll,然后设置导航的position: fixed以达到固定在顶部的效果。这种导航吸顶效果的实现方法网络上已经N多种,今天肯定不是再来介绍一次,而是介绍另外一种更为简单的实现方法。

在介绍真正实现方法之前,我们先来了解一下position,它有多少个属性值呢?

可能你会毫不犹豫的想到:

{
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
}


上面是我们常用的,当然,还有一些少用的值:

{
  position: inherit;
  position: initial;
  position: unset;
}


这些跟实现导航吸顶效果有什么关系呢?不好意思,没啥关系,有关系的是另一个属性值:position: sticky;

这属性值的作用是什么呢?

粘性定位,是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。(来源:position

注意:position: sticky还是一个实验性的属性值。

看着文字可能一时不好理解,我们还是以实例开始:


在上面的例子中,我们给三个div都设置了position: sticky,但由于top值有所不同,产生的效果也有所不同。

  • 相同点
box1、box2、box3在滚动之前,它们与相对定位一样
当到达某一个位置时,表示与绝对定位一样

  • 不同点
box1top值为0,在靠近页面视口顶部时,固定在页面视口的顶部
box2top值为30px,在离页面视口30px的位置,它固定住
box3没有设置top,它的行为一直是相对定位

相信通过上面的例子,你已经明白“粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。”这段话的意思,跨域特定阀值,也就是上面的top值,当然,起作用的还有right、left、bottom值。

注意
  • 粘性定位的固定定位并不一定是position:fixed,只有目标元素的任意父元素都没有设置position:relative | absolute | fixed | sticky的情况下,才与position: fixed表现一样。而当其任一父元素设置了position:relative | absolute | fixed | sticky时,目标元素是相对于父元素的固定。

(2018-06-17补充)

当与flexbox布局一起使用时,position: sticky会失效。因为 flexbox 默认会拉伸元素(align-items: stretch),也就是说子元素的高度会被拉伸跟父元素高度一样,所以我们需要设置align-items不为stretch


先别那么兴奋,我们还是逃脱不了一个问题:兼容性


如有问题或疑问,欢迎在下方评论区留言!




关注”全栈技术杂货铺“

全栈技术杂货铺