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…