CSS Sticky

[sedationh]

最近修了个 Bug, 用到了 Sticky 这个 CSS 特性,予以记录

https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example#sticky_positioning

Note

sticky 是一种强大的 CSS 特性，它结合了 relative 和 fixed 的定位行为：

• 元素在滚动区域内表现为相对定位 (relative)。
• 当滚动达到设置的阈值时，元素会固定在视口的某个位置 (fixed)。

https://codepen.io/sedationh/pen/poMBNQz

<iframe src="https://codepen.io/sedationh/pen/poMBNQz" style="width: 100%; height: 500px; border: none;"></iframe>

在上面的例子中, containter 的高度为 300px, 其子元素 list 为 500px 结合 overflow: auto; 就产生了滚动

这里重点提一下, containter 上我特意设置了 50px, 如果你在 stikcy 的元素上设置 top: 0; 则是下面的效果

想要吸到顶部,需要设置 top: -50px; 才可以