滚动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 页面中尝试了上面的代码。我把它放在mounted()里面。但它不起作用。我需要使用 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
    }
  }
}