Question

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

我已经找到了使用jquery的各种示例。但是我需要使用vuejs实现。

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

我在vue页面中尝试了上述代码。我把它放在mount（）里面。但这是行不通的。我需要使用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
    }
  }
}

滚动Vue.js上的导航栏不透明度

1 个答案: