專案開發中導航欄隨頁面滾動漸隱漸顯這一功能還是較為常用的，下面作一個用vue實現此功能的程式碼分享。

1. 為導航欄元素style屬性用v-bind繫結data資料"opacityStyle"。

<div class="header" :style="opacityStyle">
 景點詳情 //內容我就簡約了，實際開發以需求為準
</div>

2. data中定義opacityStyle，資料內容是opacity透明度屬性，設定為0。

data() {
 return {
 opacityStyle:{ opacity:0 }
 }
}

3. 監聽scroll事件並執行相應方法，一般我習慣在activated生命週期時開始監聽(activated是keepAlive屬性下產生的一個生命週期，在進入頁面時)。

activated(){
 window.addEventListener('scroll',this.handleScroll)
}

4. 設計handleScroll()方法。通過獲取scroll滾動偏移值，指定數值對opacity屬性進行計算，讓透明度聯動變化。

methods:{
 handleScroll(){
 const top = document.documentElement.scrollTop //獲取scroll偏移值
 if(top > 45 && top <= 150){ //實際按需求取範圍
  const opacity = top / 150 //對opacity作計算，透明度從起始到1隨偏移值而改變
  this.opacityStyle = {opacity} //實時返回給opacityStyle
 }
 }
}

5. 對scroll監聽進行解綁。剛剛在activated()中執行監聽，同樣的我們在deactivated()中移除監聽。這一步很重要，很多人都會忽略，如果不解除將可能影響到其他頁面的scroll行為，導致專案產生bug。

deactivated(){
 window.removeEventListener('scroll',this.handleScroll)
}

以上是vue實現頁面滾動顯隱導航欄功能的程式碼和邏輯，有疑惑例如keepAlive用法等不明白的地方可檢視文件另外學習~

總結

到此這篇關於vue實現導航標題欄隨頁面滾動漸隱漸顯效果的文章就介紹到這了,更多相關vue 導航標題欄滾動漸隱漸顯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！