使用jQuery檢測滾動方向的變化

Question

我正在使用基本jQuery函數在向上或向下滾動時將某些類切換爲div。

基本上它的工作原理是這樣的：

• 當用戶向下滾動，添加類「是頭隱藏」，去掉類「是首部可見」
• 當用戶滾動起來，添加類「是頭可見的」，去掉類「是頭隱藏」

這裏是我的代碼：

function hidingHeader() { 

    var didScroll, 
     lastScrollTop = 0, 
     tolerance = 15, 
     header = $('header'), 
     headerHeight = header.outerHeight(true), 
     fixedClass = ('is-header-fixed'), 
     hiddenClass = ('is-header-hidden'), 
     visibleClass = ('is-header-visible'), 
     transitioningClass = ('is-header-transitioning'); 

    win.scroll(function(event) { 
     didScroll = true; 
    }); 

    setInterval(function() { 
     if (didScroll) { 
      hasScrolled(); 
      didScroll = false; 
     } 
    }, 250); 

    function hasScrolled() { 
     var st = $(this).scrollTop(); 

     // SCROLL DOWN 
     if(st > lastScrollTop) { 

      header.removeClass(visibleClass); 
      if(st >= headerHeight) { 
       header.addClass(fixedClass).addClass(hiddenClass); 
      } 

     // SCROLL UP 
     } else { 
      // Make sure they scroll more than tolerance 
      if(Math.abs(lastScrollTop - st) > tolerance) { 
       header.removeClass(hiddenClass).addClass(visibleClass); 
      } 
     } 

     // UPDATE SCROLL VAR 
     var lastScrollTop = st; 
    } 
} 

現在，我想添加一個包含CSS transform屬性的「is-transitioning」類，我將使用CSS animation callback刪除這些屬性。問題是我需要這個類觸發一次，換句話說，只有當滾動方向發生變化時，並非每次用戶滾動。

我想存儲一個「倒數第二」的scrollTop變量，以便檢測滾動方向的變化，但是我的嘗試失敗了。有什麼建議？

Answer 1

也許是這樣的？

function hidingHeader() { 

var didScroll, 
    lastScrollTop = 0, 
    tolerance = 15, 
    lastDir = null, // you can start with a non-null if you don't want to trigger the first down for example, make this lastDir = "down", 
    header = $('header'), 
    headerHeight = header.outerHeight(true), 
    fixedClass = ('is-header-fixed'), 
    hiddenClass = ('is-header-hidden'), 
    visibleClass = ('is-header-visible'), 
    transitioningClass = ('is-header-transitioning'); 

win.scroll(function(event) { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // SCROLL DOWN 
    if(st > lastScrollTop) { 

     header.removeClass(visibleClass); 
     if(st >= headerHeight) { 
      header.addClass(fixedClass).addClass(hiddenClass); 
     } 

     if(lastDir !== "down") { // Should only get triggered once while scrolling down, the first time the direction change happens 
      lastDir = "down"; 
      // do your transition stuff here 
     } 

    // SCROLL UP 
    } else { 
     // Make sure they scroll more than tolerance 
     if(Math.abs(lastScrollTop - st) > tolerance) { 
      header.removeClass(hiddenClass).addClass(visibleClass); 
     } 

     if(lastDir !== "up") { // Should only get triggered once while scrolling up, the first time the direction change happens 
      lastDir = "up"; 
      // do your transition stuff here 
     } 
    } 

    // UPDATE SCROLL VAR 
    var lastScrollTop = st; 
} 

}