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

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

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