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

Question

当用户滚动页面时，我想更改固定导航栏背景的不透明度。最初导航栏的背景应该是透明的，当向下滚动时，背景需要变为白色。就像这个例子https://codepen.io/michaeldoyle/pen/Bhsif

我已经找到了使用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>

这就是我的导航栏组件的样子。

nav.navbar{
-webkit-transition: all 0.4s ease;
transition: all 0.8s ease;
}
.navbar-inverse {
background-color: rgba(255,255,255,0);
}
nav.navbar.transparent {
background-color:rgba(0,0,0,1);
}

这是我使用的css部分。

Answer 1

在created生命周期挂钩中设置侦听器：

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