纯CSS实现吸顶效果

吸顶效果，顾名思义，就是当元素靠近顶部时，自动固定在顶部。


常用场景：
导航栏
字母列表

要实现导航吸顶效果，我们一般使用的是监听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在滚动之前，它们与相对定位一样
当到达某一个位置时，表示与绝对定位一样

• 不同点：

box1的top值为0，在靠近页面视口顶部时，固定在页面视口的顶部
当box2的top值为30px，在离页面视口30px的位置，它固定住
box3没有设置top，它的行为一直是相对定位

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

注意：

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

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


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