[CSS学习笔记] 粘性固定 position:sticky

2020.06.08更新

在研究rem布局时，无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。
使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。

网易新闻首页效果

基本用法

nav{
  position:sticky;
  top:10px; /* 阈值 */
}

top/bottom属性

top,bottom的距离阈值取决于最近一个overflow是hidden scroll auto或 overlay 的祖先元素（并不是相对于viewport 视口）。

例如我们设置top:100px时，在元素滚动到距离祖先元素顶部小于设置的top:100px之前，元素为相对定位。当滚动到超过或等于top:100px时，元素将固定在与祖先元素顶部距离 top:100px 的相对位置，直到距离回滚到阈值以下。

根据下面的例子，我们可以看到position:sticky元素设置的top值是最近一个设置了overflow的祖先元素的距离，当它滚到距离低于其值时将固定在视口当中，此时该元素的效果就为固定定位。

下面例子的结构:

<style>
 /*  精简的部分  */
.container {
    display: flex;
}
.left {
    width: 30%;
    border: 1px solid;
}
.right {
    border: 1px solid red;
    width: 100%;
    margin-top: 40px;
     /*  祖先元素为 auto scroll hidden  */
    overflow: scroll; 
    height: 400px;
}
nav {
  position: sticky;
  top: 100px;
}
</style>
<div class="container">
  <div class="left">右边距离顶部有margin-top: 100px</div>
  <div class="right">
    <h1 style="height:200px;">顶部高200px 红线为中线</h1>
    <nav>这是导航 top:100px</nav>
    <p>滚一个</p>
    <p>滚一个</p>
    <p>滚一个</p>
    <p>滚一个</p>
    <p>到底啦！</p>
  </div>
</div>

demo

总结

1. top、bottom 的生效距离由最近一个overflow属性是hidden scroll auto或 overlay 的祖先元素决定。
2. 父元素为overflow:hidden时，由于容器内无法滚动，所以实际上也无法生效。
3. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
4. 父元素的高度不能低于sticky元素的高度。

兼容

  position: -webkit-sticky;
  position: sticky;

Reference

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position