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

只需使用position: sticky即可实现

    position: sticky;
    top: 0px;

需要注意的是：

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

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

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

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

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

 

运行DEMO