快捷導(dǎo)航

vue實現(xiàn)中部導(dǎo)航欄布局功能

更新時間：2019年07月30日 13:50:37 作者：pppercyWang

這篇文章主要介紹了vue實現(xiàn)中部導(dǎo)航欄布局功能，本文圖文并茂，代碼實例相結(jié)合介紹的非常詳細(xì)，需要的朋友參考下吧

接下來是中部導(dǎo)航欄。我們看到這里的頭像動畫，和中部導(dǎo)航欄定位都是跟鼠標(biāo)滾動有關(guān)的。我們先將布局實現(xiàn)一下。這里是要求在頁面上部分滾動范圍內(nèi)，導(dǎo)航欄一直在div的上部，隨著鼠標(biāo)的滾動而改變位置。到下部分滾動范圍，導(dǎo)航欄就一直固定到頁面的上部分。

這里需要注意兩個地方

這里需要一個覆蓋不了的區(qū)域，可以給人一種更好開關(guān)屏的感覺。而且中部導(dǎo)航欄下方區(qū)域的內(nèi)容，在下滑的時候不能出現(xiàn)在這個區(qū)域。

一定要注意盡可能的少進(jìn)行DOM操作，這樣是非常影響性能的！

監(jiān)聽鼠標(biāo)滾動事件

private fixedFlag: boolean = false;
 private unFixedFlag: boolean = true;
 private mounted() {
  window.addEventListener("scroll", this.handleScroll);
 }
 private handleScroll() {
  const scrollTop =
   window.pageYOffset ||
   document.documentElement.scrollTop ||
   document.body.scrollTop;
  if (scrollTop > 300) {
   if (!this.fixedFlag) {
    const obj = document!.getElementById("index-menu");
    const obj2 = document!.getElementById("fake-area");
    obj!.style.position = "fixed";
    obj!.style.top = "77px";
    obj2!.style.position = "fixed";
    obj2!.style.top = "47px";
    this.fixedFlag = true;
    this.unFixedFlag = false;
   }
  } else {
   if (!this.unFixedFlag) {
    const obj = document!.getElementById("index-menu");
    const obj2 = document!.getElementById("fake-area");
    obj!.style.position = "";
    obj!.style.top = "";
    obj2!.style.position = "";
    obj2!.style.top = "";
    this.unFixedFlag = true;
    this.fixedFlag = false;
   }
  }
 }

效果展示