共计 817 个字符，预计需要花费 3 分钟才能阅读完成。
sticky 粘性定位
position: sticky; 基于用户的滚动地位来定位。
粘性定位元素的款式体现，会在 position: relative 与 position: fixed 之间切换。是否满足阈值条件决定粘性定位元素的款式体现。
在这个案例中，当 stiky 元素的未达到阈值地位 (top: 20px;) 它的行为就像 position: relative;
而当页面滚动超出指标区域时，它的体现就像 position: fixed; 会固定在指标地位。
如何让 sticky 失效：
1、须指定 top, right, bottom 或 left 四个阈值其中之一，才可使 sticky 失效。否则其行为始终为 position: relative。
留神：当 top 和 bottom 同时设置时，top 失效的优先级高；left 和 right 同时设置时，left 的优先级高。
2、除 <body> 外，sticky 元素的任意父元素不能为 overflow: hidden || auto || scroll。sticky 元素的任意父元素必须均为 overflow: visible;
3、父元素的高度不能低于 sticky 元素的高度。
此外还有一些奇怪的个性：
1、通过样式表增加 z-index 有效(.class #id 的形式有效)。在 sticky 元素上间接增加行内 style 无效。
2、sticky 不会触发 BFC。
示例代码：
https://github.com/DiracKeeko…
其余 - 兼容性测试
https://caniuse.com/?search=s…
此外检测浏览器是否反对 sticky 能够在控制台中应用如下代码测试：
if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {console.log("support");
}同步更新到本人的语雀
https://www.yuque.com/diracke…
