position:sticky实现吸顶效果以及兼容性

在开发时遇到一个吸顶效果的需求，先看一下最终实现的效果：

收到这个需求的时候，其实也知道position:stricky这个属性，现在重新介绍一下：

• 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
• 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
• 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。 

用起来是很爽，几个CSS写出吸顶效果，但是兼容性不是很好。IE全挂（又是IE） Chrome在以前是放弃这个属性的，后来又支持了。

 

就是这几句CSS代码就实现了上面我录制的效果。

.css-sticky .list{
  position: relative;
}
.css-sticky .list-title{
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 9;
}

但是对于不支持的浏览器咋办呢，只能用JS模拟了，一顿操作写了两小时才搞定，还要监听scroll事件效率低下。写完之后发现GitHub上竟然有已经造好的轮子！我又浪费了两个小时的生命。

https://github.com/wilddeer/stickyfill

直接上轮子的链接，并注释了我的两小时代码，毕竟封装的不是很好，如果以后还有需求没办法直接用。有轮子还真是方便呀。这样就简单多了

// 对于支持sticky的浏览器直接使用CSS吸顶效果，否则使用Stickyfill模拟吸顶
  if ( !('CSS' in window && CSS.supports && CSS.supports('position', 'sticky')) ) {
    Stickyfill.add( document.querySelectorAll('.list-title') );
  }

对于支持的直接CSS效果搞定最方便性能也最好，不支持的则用stickyfill这个轮子去解决。

下班之后又思考了一下，我一开始的开发思路有些问题，直接用JS挨个去计算顶部的距离实现的吸顶效果，对每份吸顶的元素进行clone设置fixed，很难去封装和复用，代码也很搓，而是应该用模拟sticky的思路更好，为每个元素的位置设置absolute更好。