CSS粘滞定位：页面滑动到某位置时使其固定不动，随父元素结束解除固定

先在父元素加上（如果没有父元素，可直接用body添加）

position: relative;

然后在需要粘滞的元素加上

position: sticky;
top: 0px;

即可生效。

 

需要注意的是：

父元素不能有overflow:hidden或者overflow:auto属性；

必需指定top、bottom、left、right这4个值之一，否则只会处于相对定位；

父元素的高度不能低于sticky元素的高度；

sticky元素仅在其父元素内生效。

当position: sticky的父元素低于子元素中position: sticky时，固定会随着父元素的高度结束而自动解除，详细请查看下方DEMO

 

运行DEMO