是什么

粘性定位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 ☕