[css] 粘性定位(position: sticky) 的使用

sticky 粘性定位
position: sticky; 基于用户的滚动位置来定位。
粘性定位元素的样式表现，会在 position: relative 与 position: fixed之间切换。是否满足阈值条件决定粘性定位元素的样式表现。

在这个案例中，当stiky元素的未到达阈值位置(top: 20px;)它的行为就像 position: relative;
[css] 粘性定位(position: sticky) 的使用

而当页面滚动超出目标区域时，它的表现就像 position: fixed;会固定在目标位置。
[css] 粘性定位(position: sticky) 的使用

如何让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。

此外检测浏览器是否支持 sticky 可以在控制台中使用如下代码测试：

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    console.log("support");
}

Andriod第三方源码分析