position的sticky這個屬性一般用於導航條，因為他在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。基本就是自適應的導航條。

　　但是其兼容性在ios上很流暢，但是再安卓上，安卓4.4.4以下全軍覆沒，莫名其妙在安卓7上也跪了。可能你會想，既然兼容那麽差，為什麽還要用。在微信瀏覽器上，滾動並不是即時的，它需要等滾動完，scroll事件才觸發，這樣通過js計算距離屏幕頂端距離，然後fixed和relative定位切換，並不流暢，會卡頓

　　那麽只能通過判斷當前設備是否支持sticky這個屬性，如果不支持則替換成fixed和relative定位組合；

　　以下是demo代碼

  let elem = window.document.documentElement;
  let w = elem.clientWidth;
  let h2 = (w/16*9);//使用sticky定位的頂端是一個16比9的div
  function isSupportSticky() {//判斷是否支持sticky
    var prefixTestList = [‘‘, ‘-webkit-‘];
    
 
var stickyText = ‘‘;
    for (var i = 0; i < prefixTestList.length; i++ ) {
      stickyText += ‘position:‘ + prefixTestList[i] + ‘sticky;‘;
    }
    // 創建一個dom來檢查
    var div = document.createElement(‘div‘);
    div.style.cssText = stickyText;
    document.body.appendChild(div);
    var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
    document.body.removeChild(div);
    div 
 
= null;
    return isSupport;
  }
  let fixBottomBar = function(){
    var  topbarTop = h2;
    window.onscroll = function(e){
      let winTop = document.body.scrollTop;
      if(winTop > topbarTop){
          _this.navClass[‘nav-fixed‘] = true;  //vue動態添加class寫法
//            topbar.setAttribute(‘class‘,‘nav nav-fixed‘);  //原生js寫法
      }else{
        _this.navClass[‘nav-fixed‘] = false;
//            topbar.setAttribute(‘class‘,‘nav‘);
      }
    }

  }
  !isSupportSticky() && fixBottomBar();

position sticky的兼容