vue實現中部導航欄布局功能

2019-11-19 11:06:14

字體：大中小

來源：轉載

供稿：網友

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

這里需要注意兩個地方

這里需要一個覆蓋不了的區域，可以給人一種更好開關屏的感覺。而且中部導航欄下方區域的內容，在下滑的時候不能出現在這個區域。

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

監聽鼠標滾動事件

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;   }  } }

效果展示