浏览器的滚动条滚动时，导航条的背景变色

最新推荐文章于 2024-08-28 10:01:27 发布

lancnn

最新推荐文章于 2024-08-28 10:01:27 发布

阅读量8.9k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_41767649/article/details/82797857

版权

javascript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

浏览器的滚动条滚动时，导航条的背景变色

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