實現一個效果：當向下滾動網頁時，導航欄的背景色編程紅色,京東、蘇寧的首頁都是這樣
解決方法：監聽首頁滾動事件，改變背景顏色的透明度，由0到1，由於向下滾動，滾動豎直距離變大，當滾動據距離超出頭部的高度，變成紅色
1 監聽首頁滾動事件
- 在首頁index下面的mounted生命週期函數中添加window.onscroll監聽函數
由於頭部的屬性改變與讀取比較多，所以設定一個變量
由於頭部不隨滾動變化，設在監聽函數外部，提高效率 - 由於計算得到的是數值，通過+將數值轉換爲字符串
- 注意如何獲取元素
-
如何修改元素屬性
![]()
2 調整背景顏色
設置整個單頁面app的背景顏色爲灰色
設置底部導航欄的背景顏色爲白色
去色小tip：點擊左邊的顏色方塊，點擊取色器，選區需要的顏色