Last updated on

CSS Sticky

最近修了个 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

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

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

image

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