1. 程式人生 > >分享一下我剛剛寫的一個基於VUE的監聽滾動事件固定導航選單的方法

分享一下我剛剛寫的一個基於VUE的監聽滾動事件固定導航選單的方法

本人最近一直在研究VUE這個框架,剛剛遇到一個需要使用固定導航選單的地方,現在寫出來分享給大家,其實也會有很多種解決方案,效能上如何更高效也是見仁見智了,話不多說,直接上程式碼

  1. 首先,在export default裡我使用了window.addEventListener來監聽scroll滾動事件,第一個引數為監聽的事件型別,第二個引數傳入一個回撥函式,這個回撥函式為handleScroll
 mounted (){
		  window.addEventListener('scroll', this.handleScroll) //此處監聽scroll事件,並傳入回撥函式
		}
    2.然後methods中寫入剛剛addEventListener中的handleScroll也就是實現監聽滾動並實現判斷的主要指令碼
 var nav = document.getElementById('nav');//獲取到包裹導航的最外層DIV的ID,並存入變數nav
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //此處將導航條的滾動存入scrolltop
if(scrollTop>50){    //邏輯判斷此處的50為導航選單上方標題欄DIV的高度,如果向下滾動導航選單,觸發下方的CSS樣式更改
 nav.style.position = 'fixed';  //導航欄絕對定位
 nav.style.top = '0'; //導航距離頂部0畫素,一直在頂部出現
 nav.style.zIndex = '99999';  //設定導航選單層級優先度最高
 }else{
  nav.style.position = 'relative';  // 此處為導航選單回拉後復原,根據專案需求來寫,我覺得這裡我寫的是有些問題的,不過在我的專案中可以實現效果,具體要看情況
 }
}

情況就是這樣啦,有什麼問題的小夥伴請加我VX king951231我們一起探討