Блог

Я хочу изменить непрозрачность моего фиксированного фона панели навигации при прокрутке страницы пользователем. Изначально фон панели навигации должен быть прозрачным, а при прокрутке вниз его фон должен быть изменен на белый. Как в этом примере 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, которую я использовал.

Установите прослушиватель в created цепочке жизненного цикла:

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