MDN 定义
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于
top、right、bottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hidden、scroll、auto或overlay时），即便这个祖先不是最近的真实可滚动祖先
如何触发粘性定位
经过我的验证, 这里分为两个情况:
- 滚动元素是元素的非父级元素, 这种情况下元素的粘性定位表现与其父元素有关, 看下面的例子:
例子中,最外层是滚动元素, 黄色盒子是父级元素, 绿色盒子是目标元素, 可以看到, 当父级元素左边框到滚动元素左边框的距离 120px-60px 这个区间的时候, 是相对定位的, 目标元素会跟着滚动一起动, 当距离小于 60px 的时候, 目标元素就变成固定定位了,一直固定在距离滚动元素 60px 的位置, 另外, 可以注意到, 到目标元素将要超出父级元素的右边框时, 它又变回了相对定位.
- 滚动元素是元素的父级元素
这时候只需要考虑目标元素到滚动元素左边框的距离, 大于 60px 时, 目标元素跟着滚动, 当距离小于 60px, 目标元素将固定于 60px 这个位置,
粘性定位效果失效的几个原因
- 当存在父元素的情况下, 横向滚动时, 父元素的宽小于等于目标元素, 纵向滚动时, 父元素的高小于等于目标元素,这时候没有空间给目标元素触发粘性定位的效果。
- 在目标元素到滚动元素之间, 存在 overflow 为
hidden / scroll / auto的元素。
