h5滾動頁面固定導航

1、需要效果

2、實現方法

（1）原生js實現

document.addEventListener('scroll', function (event) { 
    var scrollDamo = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollDamo >= 350) {    // 觸發的位置
        document.getElementsByClassName('cont-info-kc')[0].style.cssText =  'position:fixed;';
    } else {
        document.getElementsByClassName('cont-info-kc')[0].style.cssText = 'position:static;';
    }
});

 html

<div class="cont-info-kc"></div>

(2) vue實現

<div style="height:16px;background:#F4F4F4" id='testNavBar'></div>
<div id="cont-info-kc" :class='{ fixedNavbar: isfixTab }'>
   <ul>
     <li :class="period==-1 ? 'secactive': ''" @click.stop="getsetion(-1)">全部</li>
     <li :class="period==155 ? 'secactive': ''" @click.stop="getsetion(155)">好的</li>
     <li :class="period==156 ? 'secactive': ''" @click.stop="getsetion(156)">晴天</li>
     <li :class="period==157 ? 'secactive': ''" @click.stop="getsetion(157)">需要</li>
   </ul>
   <a @click.stop="moreClick" style="line-height:50px;" v-show="!tongyongIsshow">更多</a>
</div>

data () {
    return {
        isfixTab: false
    }
},

methods: {

    // 先分別獲得id為testNavBar的元素距離頂部的距離和頁面滾動的距離
    // 比較他們的大小來確定是否添加fixedNavbar樣式
    handleTab() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#testNavBar').offsetTop
      scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
    }
    
},

// 監聽頁面滾動
mounted () {
    window.addEventListener('scroll', this.handleTab, true)
},

//離開時清除滾動監聽
beforeRouteLeave (to, from, next) {
   window.removeEventListener('scroll', this.handleTab, true)
   next()
}

.fixedNavbar{
    position: fixed;
    top: 2.25rem;
    left: 0;
    width: 100%;
    border-top: 0.05rem solid #f5f5f5;
    border-bottom: 0.05rem solid #f5f5f5;
    background: #f5f5f5;
}