position: sticky

Sat, 09 Nov 2024 00:00:00 +0800

如果问，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: Sticky on Last Stand

position: sticky

示例