常用场景：
导航栏
字母列表
要实现导航吸顶效果，我们一般使用的是监听
scroll，然后设置导航的position: fixed以达到固定在顶部的效果。这种导航吸顶效果的实现方法网络上已经N多种，今天肯定不是再来介绍一次，而是介绍另外一种更为简单的实现方法。在介绍真正实现方法之前，我们先来了解一下
position，它有多少个属性值呢？可能你会毫不犹豫的想到：
{
position: static;
position: relative;
position: absolute;
position: fixed;
}上面是我们常用的，当然，还有一些少用的值：
{
position: inherit;
position: initial;
position: unset;
}这些跟实现导航吸顶效果有什么关系呢？不好意思，没啥关系，有关系的是另一个属性值：
position: sticky;这属性值的作用是什么呢？
粘性定位，是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。（来源：position）
注意：
position: sticky还是一个实验性的属性值。看着文字可能一时不好理解，我们还是以实例开始：
<iframe src="undefined" style="width:undefinedpx;height:undefinedpx;border:1px solid #d9d9d9">
在上面的例子中，我们给三个div都设置了
position: sticky，但由于top值有所不同，产生的效果也有所不同。- 相同点：
当到达某一个位置时，表示与绝对定位一样
- 不同点：
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时，目标元素是相对于父元素的固定。
先别那么兴奋，我们还是逃脱不了一个问题：兼容性
<iframe src="undefined" style="width:undefinedpx;height:undefinedpx;border:1px solid #d9d9d9"><iframe src="undefined" style="width:undefinedpx;height:undefinedpx;border:1px solid #d9d9d9">
如有问题或疑问，欢迎在下方评论区留言！
