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;}