css学习笔记 -position-sticky(粘性固定)

情景说明：好多情况下，遇到某些菜单或者筛选的选项需要固定在页面的固定位置，通常情况下，需要监听scroll事件，才能实现。

看到网易新闻移动端首页和饿了么的首页发现一个新的属性，position:sticky,实现的。代码量精简了不少。

 

写了个简单的实例实现，觉得阔以实现。亲测可用
设备兼容：（按照下面的写法即可）

position: sticky;

position: -webkit-sticky;

position: -moz-sticky;

position: -ms-sticky;

position: -o-sticky;

 

生效条件

需要注意的是，使用该属性有几个必要条件，否则会失效：

1. 父元素不能overflow:hidden或者overflow:auto属性。
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素的高度不能低于sticky元素的高度
4. sticky元素仅在其父元素内生效