Javascript 滚动vuejs上的导航栏不透明度

我想在用户滚动页面时更改固定导航栏背景的不透明度。最初，导航栏背景应该是透明的，当向下滚动时，背景需要更改为白色。 比如这个例子

我使用jquery找到了这个场景的各种示例。但我需要使用vuejs实现这一点

$(window).scroll(function() {
  if ($(document).scrollTop() > 200) {
    $('nav').addClass('transparent');
  } else {
    $('nav').removeClass('transparent');
  }
}); 

我在vue页面中尝试了上述代码。我把它放在里面。但它不起作用。我需要使用vue完成此操作。不像上面的jquery

<nav class="navbar navbar-inverse">
      <ul class="nav menu">
<li>
  <router-link to="/about" @click.native="closeNavBarFromChild">About</router-link>
</li>
<li class="hidden-lg hidden-md">
  <router-link to="/product" @click.native="closeNavBarFromChild">Product</router-link>
</li>
</ul>
    </nav>

---

这是我使用的css部分。

在

创建的
生命周期挂钩中设置侦听器：

export default {
  created () {
    window.addEventListener('scroll', this.onScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll (event) {
      // add/remove class
    }
  }
}

但它不起作用
-以什么方式？控制台中的错误？什么不起作用？控制台中没有显示任何内容。我只是用这个简单的例子进行测试。什么也没发生。我将jquery代码放在mounted（）中。是吗？哦，我还以为你在用vuejs呢
export default {
  created () {
    window.addEventListener('scroll', this.onScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll (event) {
      // add/remove class
    }
  }
}