position：sticky粘性定位

最近项目中遇到一个需要置顶导航栏的问题，一顿操作用js写好了之后偶然间发现css居然新增了一条属性可以实现同样的效果。

position：sticky粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位，它主要用在对scroll事件的监听上。

简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用方法也很简单

.sticky {
  position: sticky;
  top: 100px;
}

不过也要满足下面的条件：
1.父元素不能overflow:hidden或者overflow:auto属性。
2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3.父元素的高度不能低于sticky元素的高度
4.sticky元素仅在其父元素内生效

不过在实际使用的之后发现这玩意的兼容性并没有那么理想，白忙活了半天最后还是得用老办法。

最后附上js简单实现粘性定位的代码

function sticky(el) {
  var top = document.body.scrollTop || document.documentElement.scrollTop;
  if( el.offsetTop > top) {
       el.style.position = 'relative';
   }else {
       el.style.position = 'fixed';
   }
}

window.onscroll = sticky(el)