css实现元素吸顶效果

今天有个要做吸顶效果的需求，由于页面比较复杂，我在那猛写各种监听，准备用fixed实现，突然搜到了position: sticky;，非常好用，记录一下。

什么是 position: sticky;？

position: sticky; 是 CSS 中的一种定位属性，它使元素在页面滚动时可以相对于视口或某个父元素保持固定位置。这意味着元素会在页面滚动到特定位置时停止滚动，并保持在那个位置，直到页面继续滚动到它的上下文范围之外。

如何使用 position: sticky;？

要使用 position: sticky;，需要定义以下三个属性：

1. position: sticky;：这告诉浏览器该元素应该是“粘性”的，即在特定条件下固定在屏幕上。
2. top，bottom，left，或 right：这些属性定义了元素在粘性定位时相对于父元素的位置。例如，如果你想让一个元素在页面顶部保持固定，你可以设置 top: 0;。
3. 确定粘性元素的上下文范围：这通常通过将父元素的高度设置为固定值或百分比来实现。粘性元素将在父元素的边界内保持固定。

以下是一个基本的示例：

.sticky-element {
  position: sticky;
  top: 0;
}

<div class="parent-element">
  <div class="sticky-element">
    <!-- 这个元素将在页面滚动时保持在顶部 -->
  </div>
  <!-- 其他内容 -->
</div>

注意事项

设置了position:sticky的元素的效果完全受制于父级元素，因为他不会脱离文档流。

1. 父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
2. 父元素的高度不能低于sticky元素的高度。
3. 同一父容器中的sticky元素，如果定位置相等，则会发生重叠。
4. sticky元素如果不属于相同父元素，但是他们的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。
5. 必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高。

注意事项引用自：

https://blog.csdn.net/JiangLittleBai/article/details/108653463