需求场景:
公司需求:某个h5页面上有个导航栏需要在滚动到顶部时,吸顶固定在顶部;向下滚动时取消吸顶。完整代码:
1.html模块,navBarFixed变量控制吸顶样式
// 导航栏模块
<div class="nav" :class="{'fixNav':navBarFixed}">
</div>
<script>
export default {
data() {
return {
navBarFixed: false,//控制吸顶样式
navBarTop: 0,//导航栏到顶部的距离
timer: null,
}
}
}
</script>
<style scoped>
/* 固定导航栏 */
.fixNav {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
}
</style>
2.写入事件监听,监听滚动条
mounted(){
window.addEventListener("scroll", this.watchScroll);
this.timer = setInterval(()=>{
let navDom = document.getElementsByClassName("nav")[0];
//页面数据渲染完毕,获取导航栏到顶部的距离
if (document.readyState === 'complete' && navDom) {
this.navBarTop = navDom.offsetTop;
window.clearInterval(this.timer);//清除定时器
}
},500)
},
// 移除事件监听
destroyed() {
window.removeEventListener("scroll", this.watchScroll);
},
methods: {
watchScroll() {
// 滚动条:滚动的距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 滚动的距离>元素到顶部的距离时,实现吸顶效果
this.navBarFixed = scrollTop > this.navBarTop ? true : false;
},
},