粘性固定属性 -- 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）