position sticky的兼容

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

　　可是其兼容性在ios上很流暢，可是再安卓上，安卓4.4.4如下全軍覆沒，莫名其妙在安卓7上也跪了。可能你會想，既然兼容那麼差，爲何還要用。在微信瀏覽器上，滾動並非即時的，它須要等滾動完，scroll事件才觸發，這樣經過js計算距離屏幕頂端距離，而後fixed和relative定位切換，並不流暢，會卡頓。而sticky卻很是流暢，不能由於一部分用戶的兼容不了，放棄使用這個屬性。

　　那麼只能經過判斷當前設備是否支持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();