Добавить класс css при прокрутке вверх и вниз

Question

Кто-нибудь знает, как я могу добавить класс к элементу во время прокрутки вниз, а затем другой класс во время прокрутки вверх?

Идея состоит в том, чтобы придать неподвижному элементу упругий тип, поэтому, когда пользователь прокручивает элемент, он слегка сдвинется и наоборот.

Thanks,

Scott.

Answer 1

Вы можете проверить, прокручиваются ли они вверх или вниз, проверяя верхнюю часть прокрутки окна и сравнивая ее с предыдущим верхним прокруткой, используя scroll event. debounce it for efficiency reasons

(function($, window){ 
    var $window = $(window); 
    var position = $window.scrollTop(); 
    var timeout; 

    var debounce = function(func, wait, immediate) { 
     var timeout; 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if (!immediate) func.apply(context, args); 
      }; 
      var callNow = immediate && !timeout; 
      clearTimeout(timeout); 
      timeout = setTimeout(later, wait); 
      if (callNow) func.apply(context, args); 
     }; 
    }; 

    var checkPosition = function() { 
     if(timeout !== null){ 
      //this will cancel the timeout if this function is called within 200ms 
      clearTimeout(timeout); 
     } 

     var scrollTop = $window.scrollTop(); 

     if (scrollTop > position) { 
      //scrolling down 
     } else { 
      //scrolling up 
     } 

     position = scrollTop; 

     //this function will fire if the user stops scrolling for 200ms 
     timeout = setTimeout(function(){ 
      //user stopped scrolling 
     }, 200); 
    }; 

    var debouncedScroll = debounce(checkPosition, 50); 

    $window.on('scroll', debouncedScroll); 
})(jQuery, window);