vue吸顶导航

自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。

html导航

 <div class="contain">
    <div class="nav-bar-wrap">
      <ul class="banner">
        <li
          v-for="value in banner_list"
          :key="value"
          @click="clickTab(value)"
          :class="{ active: value === isActive}" >
          {{ value }}
        </li>
      </ul>
    </div>

挂载后绑定监听事件啦

 mounted() {
    window.addEventListener("scroll", this.handScroll);
    let bann = document.querySelector(".banner");
    this.bannerTop = bann.offsetTop;
    console.log("offsetTop", this.bannerTop);
  },

滚动事件，获取滚动高度和元素离窗口的高

  handScroll() {
      let scrolltop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      if (scrolltop >= this.bannerTop) {
        document.querySelector(".nav-bar-wrap").classList.add("isTop");
        //如果滑动到导航就绑定样式让它吸顶
      } else {
        document.querySelector(".nav-bar-wrap").classList.remove("isTop");
      }
    },

主要是用的粘性布局，css

.isTop {
  position: sticky;
  top: 0;
  background-color: white;
}