粘性固定 position:sticky

在研究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>

 

设置top:100px

生效条件

需要注意的是，使用该属性有几个必要条件，否则会失效：

1. 父元素不能overflow:hidden或者overflow:auto属性。
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素的高度不能低于sticky元素的高度
4. sticky元素仅在其父元素内生效

兼容

  position: -webkit-sticky;
  position: sticky;

fall back

虽然其它浏览器尚不支持，但是实现起来其实不难，我们可以用js简单实现：

HTML

<div class="header"></div>

CSS

 .sticky { position: fixed; top: 0; } .header { width: 100%; background: #F6D565; padding: 25px 0; }

JS

 var header = document.querySelector('.header'); var origOffsetY = header.offsetTop; function onScroll(e) { window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky'); } document.addEventListener('scroll', onScroll);