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

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