解析`position: sticky;`

[yq]

是什么

粘性定位position sticky元素采用正常的文档流布局（static）,当其边框（border矩形）相对于最近的滚动祖先元素的内边框（即content矩形）的小于指定阈值时，则position sticky元素相对于该最近的滚动祖先元素固定位置。

怎么用

要实现粘性定位除了指定position: sticky;外还需指定阈值，即水平滚动必须指定left/right，垂直滚动必须指定top/bottom。
如：

.some-component{
    position: sticky;
    top: 0px;
}

粘性定位position sticky可用于实现一些“吸顶”效果。
看看这个Demo

进阶

阈值怎么计算的

比如：

.sticky-btn{
    position: sticky;
    top: 10px;
}

则表示.sticky-btn元素的上border矩形边框距离滚动容器的上内边框（即content矩形）边的距离小于10px时，则元素固定位置。

多个sticky元素

1. 在一个滚动容器里可以存在多个有效的sticky元素，sticky元素之间的行为互相独立；
2. sticky元素属于定位元素，当多个sticky元素发生重叠时遵循定位元素的重叠原则。

其他

1. 失效的sticky元素行为同relative定位。

失效的sticky元素

初次使用position: sticky;总是发现没有达到效果，常见的原因有：

1. 水平滚动时检查是否指定left/right；
2. 垂直滚动是检查是否指定top/bottom；
3. sticky元素的某个父元素（或者祖先元素）指定了overflow/overflow-x/overflow-y属性，且取值是hidden/scroll/auto；
4. sticky元素的父元素（不是祖先元素）在滚动元素视口里还不可见。
   可以看看这个Demo

兼容性

Can I Use CSS position: sticky

As of 2020, 95% of browsers have some level of support for position: sticky
Older versions of Safari will require the -webkit vendor-prefix

一般这样写：

position: -webkit-sticky;
position: sticky;

降级方案（polyfill）

如果非得要兼容各个浏览器，则得使用JS实现了。好在已经有很多优秀的库了：

1. react-sticky
2. Stickybits

参考

1. MDN: position
2. How To Make Elements Stick with CSS position: sticky
3. css-tricks: position: sticky;
4. medium: CSS Position Sticky - How It Really Works!
5. 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop