css3的粘性定位position：sticky

前言

项目中，往往会遇到类似这样的需求：网页的导航栏一开始距离浏览器顶部100px，当页面向上滑动后，导航栏跟随页面向上滑动，页面滑动了100px时，导航栏则固定到页面的顶部，脱离文档流。这种情况，我们往往会想到使用position：fixed以及配合js监听页面顶部距离浏览器顶部的距离，而实际上有个比较方便的css样式可以很快的满足此需求：position：sticky。

简介

position: sticky; 粘性定位，基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
position：sticky是相对包含position样式的祖先定位的，而position：fixed是相对于浏览器窗口定位的。