html
<div id="menuFlag">
<div :class="whether ? 'isFixed' : ''">
XXXXXXX
</div>
</div>
css
.isFixed {
position: fixed;
top: 57px;
z-index: 1000;
width: 92%;
background: #fff;
}
js
data() {
return {
whether: false,
}
},
methods:{
// 计算滚动条然后吸顶
handleScroll() {
// 计算滚动条位置
var scrollTop = document.querySelector(
"#scroll-main-container"
).scrollTop;
// 计算绑定div位置
var offsetTop = document.querySelector("#menuFlag").offsetTop;
// 进行比较设置位置fixed
this.whether = scrollTop > offsetTop - 57;
},
}
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll, true);
},