1.html
<div id="showDays" :class="headerFixed?'issFixed':''">
<van-tabs v-model="active">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
</div>
2. javascript
data() {
return {
headerFixed:0,
offsetTop:0
}
},
mounted() {
this.$nextTick(function(){
let header = document.getElementById("showDays");
this.offsetTop = header.offsetTop;
console.log("offsetTop:" + this.offsetTop);
});
window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
this.headerFixed=scrollTop>this.offsetTop?1:0
},
3. css
.issFixed{
position: fixed;
top:0px;
left:0px;
right:0px;
z-index: 4;
}