在研究rem布局时，无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位 position:sticky 。
它是相对定位 position:relative 和固定定位 position:fixed 的混合。
使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。
基本用法
nav{ position:sticky; top:10px; /* 阈值 */}
top/bottom属性
比如我们设置top:100px时，在 viewport 视口滚动到元素距离小于设置的top:100px之前，元素为相对定位。当滚动到top:100px之后，元素将固定在与顶部距离 top:100px的位置，直到 viewport 视口回滚到阈值以下。
根据下面的例子，我们可以看到position:sticky元素设置的top值是距离视口的距离，当它滚到距离低于其值时将固定在视口当中，此时该元素的效果就为固定定位。
下面例子的结构:
< h1 style="height:200px;">顶部高200px 红线为中线 < /h1>< nav style="position:sticky">这是导航 top:100px< /nav>< p>滚一个< /p>< p>滚一个< /p>
生效条件
需要注意的是，使用该属性有几个必要条件，否则会失效：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
父元素的高度不能低于sticky元素的高度。
sticky元素仅在其父元素内生效。
兼容情况
position: -webkit-sticky;position: sticky;
以上就是有关粘性固定定位 position:sticky的相关介绍了，如要了解更多web前端知识，请上学步园。