<template><div class="po"><div class="nav" :class="{'fixNav': navBarFixed}"><!-- 导航栏内容 -->导航栏内容</div><!-- 其他页面内容 --><div class="content"><p>这里是页面内容，可以使页面滚动。</p><p>这里是更多的页面内容。</p></div></div>
</template><script>
export default {data() {return {navBarFixed: false, // 控制吸顶样式navBarTop: 0, // 导航栏到顶部的距离timer: null,};},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;},},
};
</script><style scoped>
/* 固定导航栏样式 */
.fixNav {position: sticky;position: -webkit-sticky;top: 0;z-index: 999;background-color: white; /* 设置一个背景色，使吸顶效果更明显 */box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
}/* 导航栏样式 */
.nav {padding: 10px 0;text-align: center;background-color: #f0f0f0;margin-top: 80px
}/* 页面内容样式 */
.content {padding: 20px;height: 2000px; /* 这里设置一个足够高度的内容区域，以便测试滚动效果 */background-color: #ececec;
}
</style>