Как изменить CSS при прокрутке в Vue

Question

Я решил изучить Vue.js в проекте, и я не могу понять, как я могу отслеживать прокрутку окна и динамически изменять CSS после некоторого подобного расстояния, как я делал это с JQuery:

$(window).scroll(function() {
      if($(window).scrollTop() >= 100) {
        $('header').addClass('fixed');
      } else {
        $('header').removeClass('fixed');
      }
    });

Answer 1

Вы можете использовать пользовательскую директиву и связать ее с любым компонентом или элементом в вашем экземпляре Vue.

Допустим, у вас есть <div> и назовите вашу директиву on-scroll, вы бы обновили свой div: <div on-scroll="handleScroll">, где handleScroll - это метод в вашем экземпляре Vue, который, ну, в общем, обрабатывает прокрутку событие.

Директива:

Vue.directive('on-scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
})

Экземпляр Vue:

new Vue({
  el: '#el',
  methods: {
    handleScroll: (event, el) => {
       if ( window.scrollY >= 300 ) {
          el.classList.add('fixed');
       } else {
          el.classList.remove('fixed');
       }
    }
  }
});