Vue实现导航栏吸顶

Vue实现吸顶效果

通过查找资料实现了吸顶效果,在此总结归纳, 欢迎提issue
想要了解更多可以访问 ☞我的Github

• 完成的效果
  

 <div class="navBar" :class="headerFixed?'isFixed':'' ">

.navBar {
  position: relative;
  width: 100%;
  height: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
}
.isFixed {
  position: fixed;
  top: 0;
  z-index: 999;
}

data() {
    return {
       headerFixed: ''
    };

  methods: {
    handleScroll() {
      // 得到页面滚动的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        //  当滚动超过 180 时，实现吸顶效果
      if (scrollTop > 180) {
        this.headerFixed = true;
      } else {
        this.headerFixed = false;
      }
    }
  },
  

  mounted() {
    // handleScroll为页面滚动的监听回调
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //同时在destroyed回调中移除监听：
    window.removeEventListener("scroll", this.handleScroll);
  }