CSS 3的属性粘性定位position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。
使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。
基本用法：
.box{width:100%;height:100%}
.sticky{position:sticky;top:10px}
类似效果图：
在 viewport 视口滚动到元素距离小于设置的top:10px之前，元素为相对定位。当滚动到top:10px之后，元素将固定在与顶部距离 top:10px 的位置，直到 viewport 视口回滚到阈值以下。
我们可以看到position:sticky元素设置的top值是距离视口的距离，当它滚到距离低于其值时将固定在视口当中，此时该元素的效果就为固定定位。
position:sticky的生效是有一定的限制的：
- 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。
- 设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible。如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效