导航栏吸顶 V2

<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>