CSS 3的属性粘性定位position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。
使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。
基本用法：
.box{width:100%;height:100%}
.sticky{position:sticky;top:10px}如果当前屏幕没有滚动，scrollTop值为0时，.sticky元素会在页面上定义好的位置
屏幕滚动即将覆盖.sticky元素时，.sticky元素会固定吸附在页面顶部10px的位置
不需要监听屏幕滚动，一行css代码搞定，非常方便
position:sticky的生效是有一定的限制的：
1.须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。
2.设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible。如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
3.父元素的高度不能低于sticky元素的高度
4.sticky元素仅在其父元素内生效