吸顶效果

1、一个极其简洁的吸顶实现

  首先给需要吸顶效果的子元素 设置  position: sticky; top:0;  给父元素 添加 position :relative; 
  position：sticky是css3定位新属性，是相对定位relative和固定定位fixed的结合体，主要用到对scroll事件的监听上，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时（比如：top：100px）;position:sticky这时的效果相当于fixed定位，固定到适当位置。
  用法：
  position:sticky;
  top: 0px;   //像素自定！

设置：position：sticky同时给一个（top，bottom，right，left）之一即可
使用条件：
  1、父元素不能使用overflow：hidden或者overflow：auto属性。
  2、必须指定四个值之一，否则只会处于相对定位。
  3、父元素的高度不能低于sticky元素的高度。
  4、sticky元素仅在其父元素内生效。