如何使用vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能

小編給大家分享一下如何使用vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

中部導(dǎo)航欄。我們看到這里的頭像動畫，和中部導(dǎo)航欄定位都是跟鼠標(biāo)滾動有關(guān)的。我們先將布局實(shí)現(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;
   }
  }
 }

效果展示

以上是“如何使用vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！