css实现滑动吸顶功能

css实现滑动吸顶功能

实现代码：

首先给需要吸顶效果的子元素设置以下样式:

position: sticky;

top: 0px;     //这个top值，指的是 离顶部多少距离吸顶

left: 0px;

然后给父元素 添加 position :relative; 

【注意】

sticky属性仅在以下几个条件都满足时有效：

（1）页面高度不能为height:100% ；

（2）必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

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