如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是 static、relative、absolute、fixed，实际上MDN上还有一个 sticky。
今天我们就来给大家介绍这个容易被忽视的position属性值 sticky。
先来看看MDN上对于 sticky 的介绍：
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
粘性定位可以被认为是相对定位和固定定位的混合。
什么是结合两种定位功能于一体呢？
元素在跨越特定阈值前为相对定位，之后为固定定位。
也就是元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top、right、bottom 或 left 之一，换言之，指定 top、right、bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
示例
上面的文字描述估计还是很难理解，看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做：
按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。
而使用 position:sticky ，则可以非常方便的实现：
<div class="container">
<div class="sticky-box">内容1</div>
<div class="sticky-box">内容2</div>
<div class="sticky-box">内容3</div>
<div class="sticky-box">内容4</div>
</div>
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.sticky-box {
position: sticky;
height: 60px;
margin-bottom: 30px;
background: #ff7300;
top: 0px;
}
div {
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}
看看上面的 CSS 代码，只是给每个内容区块加上
{
position: -webkit-sticky;
position: sticky;
top: 0;
}
就可以轻松实现了。
简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。
不理解可以再看看下面这两张示意图（top:20px 的情况）：
距离页面顶部大于20px，表现为 position:relative;
距离页面顶部小于20px，表现为 position:fixed;
运用 position:sticky 实现头部导航栏固定
运用 position:sticky 实现导航栏固定，也是最常见的用法：
<div class="container">
<nav>我是导航栏</nav>
<div class="content">
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
</div>
</div>
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
nav {
position: -webkit-sticky;
position: sticky;
top:0;
}
nav {
height: 50px;
background: #999;
color: #fff;
font-size: 30px;
line-height: 50px;
}
.content {
margin-top: 30px;
background: #ddd;
}
p {
line-height: 40px;
font-size: 20px;
}
同理，也可以实现侧边导航栏的超出固定。
生效规则
position:sticky 的生效是有一定的限制的，总结如下：
-
须指定
top, right, bottom 或 left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 -
top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
- 设定为
position:sticky元素的任意父节点的overflow属性必须是visible，否则position:sticky不会生效。这里需要解释一下：-
如果
position:sticky元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。 -
如果
position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对viewprot定位。
-
-
达到设定的阀值。这个还算好理解，也就是设定了
position:sticky的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。
兼容性
从上面的兼容性可以看到，在主流的浏览器中已经可以正常使用。
