最近項目中遇到一個需要置頂導(dǎo)航欄的問題，一頓操作用js寫好了之后偶然間發(fā)現(xiàn)css居然新增了一條屬性可以實現(xiàn)同樣的效果。

position：sticky粘性定位可以被認(rèn)為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位，它主要用在對scroll事件的監(jiān)聽上。

簡單來說，在滑動過程中，某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當(dāng)于fixed定位，固定到適當(dāng)位置。
使用方法也很簡單

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

不過也要滿足下面的條件：
1.父元素不能overflow:hidden或者overflow:auto屬性。
2.必須指定top、bottom、left、right4個值之一，否則只會處于相對定位
3.父元素的高度不能低于sticky元素的高度
4.sticky元素僅在其父元素內(nèi)生效

不過在實際使用的之后發(fā)現(xiàn)這玩意的兼容性并沒有那么理想，白忙活了半天最后還是得用老辦法。

最后附上js簡單實現(xiàn)粘性定位的代碼

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)