2/6 Vue.js實現滑動滾動條，導航欄固定在頂部

　　今天還是在敲代碼的一天

　　但是今天的收獲還是挺大的，把這個玩意搞定了

　　　　（ 主體的代碼是按照參考書上的代碼敲出來的 有一些自我加工 ）

　　先看看效果圖（ 主要看導航欄 ）

　　

---

　　說一下我的思路，我的想法就是 將 body 的 scrollTop 作為 data 里面的一個屬性 然后 watch 來監聽數據的變化

　　　　注意 這個方法在某種程度上是 “ 脫褲子放屁 ” 做了一些無用功 但是我就是想用一下 watch 

　　　　

　　貼一下 這部分的源碼

 

 

 　　

export default {
  name: "App",
  data() {
    return {
      scroll: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);
  },
  watch: {
    scroll: {
      handler: "showTop",
    },
  },
  methods: {
    toggleLogo() {
      this.$router.push("/");
    },
    showTop(newValue, oldValue) {
      let header = document.getElementsByClassName("header")[0];

      if (newValue > 0) {
        header.classList.add("header-active");
      } else {
        header.classList.remove("header-active");
      }
      console.log(oldValue, newValue);
    },
    getScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
  },
};
</script>

 

 

 　　因為本來就進行了 對 scroll 的監聽 但是我又加了 watch 所以有點重復了

　　　　注意 上面的東西是原生的 js 寫的，所以有些笨重，完全可以用 jQuery 來的 但是我有點懶 不想找

　　CSS 代碼 這個應該通俗易懂

　　

注意事項

　　　　其實對於組件到處引用的 Vue 來說，這個還好辦一點，就是上述操作之后還得動一下腦筋，不然這個變化過程會很不流暢

　　　　　　原因是 當大於 0 的時候，這個導航欄就相當於浮空了，把以前下面的組件給頂了上去，這一動作是立馬完成的 就很突兀

　　　　解決方法就是把 下面的組件上面再弄個 margin-top 或者是再弄個等高的盒子 就好了

　　　　　　（ 可能還需要微調一下 position 、top：0 什么的 )

　　　　簡單粗糙示意圖

　　　　

 

 總結

　　寫了一個下午了，想玩了

　　明天繼續肝

·