vue 导航栏 吸顶

需求场景：

公司需求：某个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;
    },
},