是什么

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

怎么用

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

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

粘性定位 position sticky 可用于实现一些“吸顶”成果

进阶

阈值怎么计算的

比方：

.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

参考

整顿自 GitHub 笔记: 解析position: sticky;。

Buy me a coffee ☕