粘性固定属性 -- position:sticky

概述

position: sticky，这是一个比较容易忽略的css3 position 新属性，它的作用即为实现粘性布局，它是 relative 与 fixed 的结合。

 

用法

默认情况下，其表现为relative，在视窗与设置了该属性的元素之间，达到或超过其预设的 top、bottom、left、right，本属性会转变成 fixed，使 sticky 固定。

例如：

 

.menu{
    position:sticky;
    top: 0px;
}

 

例子中，设置 top 为 0，会表现为，页面滚动至 menu 的顶端时，menu 变为 fixed 固定在页面上方，效果如下：

 

 

生效条件

1. 父元素无论如何设置，必须表现为 visible 效果（注意 unset、auto、inherit、initial）

2. 必须设置 top、bottom、left、right 4个值之一，否则只会处于相对定位

3. 父元素的高度不能低于 sticky 元素的高度

4. sticky 元素仅在其父元素内生效

5. 注意 sticky 元素的位置，比如它如果在父元素最下方，那么其 top、bottom 可能会失效

 

兼容性（2019.4.15）

转载于:https://www.cnblogs.com/coderhero/p/10709179.html