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

網(wǎng)站建設(shè)、網(wǎng)站制作介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。創(chuàng)新互聯(lián)公司擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營(yíng)銷(xiāo)思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開(kāi)源代碼、注重用戶(hù)體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶(hù)的方式做到創(chuàng)意性的視覺(jué)化效果。

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

這里需要注意兩個(gè)地方

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

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

監(jiān)聽(tīng)鼠標(biāo)滾動(dòng)事件

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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！