vue tab滑动置顶

当内容区域的tab 滚动到屏幕顶部时，将tab区域固定在顶部不动，内容单独滚动。

具体实现方法如下：

1、设置html 

<div>
  <div class="tab" id="fixedBar" :class="{fixedBar:isFixed}">
   <span :class="tabActive===1?'active':''" @click="tabClick(1)">产品详情</span>
   <span :class="tabActive===2?'active':''" @click="tabClick(2)">出借记录</span>
   <span :class="tabActive===3?'active':''" @click="tabClick(3)">常见问题</span>
 </div>
 <footer class="footer"></footer>
</div>

 2、vue.js

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

mounted() {
        if(this.$route.query.rollType) {
          // 设置初始的 padding-bottom 值为 footer 的高度 +20 防止数据列表拉到最下面被footer挡住 +多少自定
          this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
          // 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
          this.offsetTop = document.querySelector('#fixedBar').offsetTop;
          // 开启滚动监听
          window.addEventListener('scroll', this.handleScroll);
        }
},

methods: {
      // 滚动监听  滚动触发的效果写在这里
        handleScroll() {
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

          if (scrollTop >= this.offsetTop) {
            this.isFixed = true;
            this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
          } else {
            this.isFixed = false;
            this.marginTop = 0;
          }
        },
},

3、css 

.fixedBar {
    position: fixed;
    top: 0.87rem;
    z-index: 100;
    width: 100%;
  }
.scroll::-webkit-scrollbar {
    display: none;
  }