css粘性定位position:sticky

article/2025/9/22 18:45:14

前言：

css3中有一个很有趣的属性position:sticky，粘性属性，效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时

(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

***注意，这个兼容性特别不好

效果图：

基本用法：

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的祖先元素的距离，当它滚到距离低于其值时将固定在视口当中，此时该元素的效果就为固定定位。

总结

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

兼容：

  position: -webkit-sticky;position: sticky;

案例代码：（可运行）

<!DOCTYPE html>
<html>
<head><title></title><style>.container {display: flex;}.right {border: 1px solid red;width: 100%;margin-top: 40px;overflow: scroll; height: 400px;}nav {position: sticky;top: 100px;}</style>
</head><body>
<div class="container"><div class="right"><h1 style="height:200px;">顶部高200px 红线为中线</h1><nav style="background: red;">这是导航 top:100px</nav><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>到底啦！</p></div>
</div>
</body>
</html>