Vue 滚动条下拉时更换导航栏组件背景样式

需求：首页下拉时，更换导航栏组件背景图片为白色。

导航栏为单独组件components，在Home页引入

1.Home页监听导航栏下拉

// main是主页面外层div, 加@scroll事件，changetopbackground为自定义方法名
<div class="main" @scroll="changetopbackground($event)">

2. methods中写对应处理代码

    changetopbackground(event) {
      let el = event.target;

      if (el.scrollTop) {// 滚动条下拉时，更换背景为白色
        let topbar = document.getElementsByClassName("header")[0]; // 获取导航栏组件元素
        topbar.setAttribute( // setAttribute修改样式
          "style",
          "background-image: none;border-bottom: 1px solid #E9EDF6"
        );
      }
      if (el.scrollTop == 0) { // 滚动条回到顶部时，导航栏恢复原样
        let topbar = document.getElementsByClassName("header")[0];
        topbar.setAttribute(
          "style",
          "background-image: '../../assets/coovallyhome/touxiang_1@2x.png'"
        );
      }
    },