瀏覽器的滾動條滾動時，導航條的背景變色

window.onscroll = function() {var headerMain = document.getElementById('headerMain');if(window.pageYOffset >= 70){headerMain.classList.add('headerMain-bg');} else {headerMain.classList.remove('headerMain-bg');} }

在vue中：

mounted() {this.$nextTick(()=>{window.onscroll = function() {var headerMain = document.getElementById('header-main');if(window.pageYOffset >= 70){headerMain.classList.add('headerMain-bg');} else {headerMain.classList.remove('headerMain-bg');}}})}

然后在css中寫樣式：

.header-main.headerMain-bg{background: #fff;color: #333;a{color: inherit;} } .header-main{position: fixed;right: 0;top: 0;width: 100%;max-width: 1320px;height: 4.375em;margin: auto 0;padding: 0 2.4em;box-sizing: border-box; }

總結

以上是生活随笔為你收集整理的浏览器的滚动条滚动时，导航条的背景变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。