css实现滑动吸顶功能

实现代码:

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

position: sticky;

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

left: 0px;

 

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

 

【注意】

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

(1)页面高度不能为height:100% ;

(2)必须指定top、bottom、left、right4个值之一,否则只会处于相对定位

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