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();

 

posted @ 2017-07-27 20:32  无敌小坑笔  阅读(5881)  评论(1编辑  收藏