瀏覽器的滾動(dòng)條滾動(dòng)時(shí)，導(dǎo)航條的背景變色

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。