解決野生動物園「反彈」問題

Question

我的代碼，我的動畫導航向上（關閉屏幕），當用戶向下滾動，並且動畫了回去當用戶滾動起來。

然而，在Safari當用戶滾動起來以更快的速度，頁面「反彈」位上方，這使得我的導航動畫了當用戶在頂部。有沒有辦法解決這個問題？

我的代碼

jQuery(document).ready(function($){ 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('nav').outerHeight(true); 

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

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

function hasScrolled() { 
if($(window).width() > 768) { 
    var st = $(this).scrollTop(); 
if (Math.abs(lastScrollTop - st) <= delta) 
    return; 
if (st > lastScrollTop) { 
    // Scroll Down 
     $('#screen-nav').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     $('#screen-nav').removeClass('nav-up').addClass('nav-down'); 
    } 

} 
lastScrollTop = st; 
} 

}); 

Answer 1

實際上我非常驚訝的是Safari瀏覽器通信，負滾動反彈的腳本，因爲它是一個非標準技術。不過，我覺得你只需要調整您的滾動條件，帳戶：

if (st > lastScrollTop && lastScrollTop >= 0 && st > 0) { 

這兩個額外的檢查將確保該菜單沒有得到，如果當前滾動位置或前滾動推高了位置是負面的。

因爲我沒有Safari瀏覽器上測試，我採取一個網頁，並通過100像素推它的身體下來，然後通過檢查對數100，而不是0進行測試模擬它：

jQuery("body")[0].id = "screen-nav"; 
jQuery("body").css("margin-top", "100px"); 

jQuery(document).ready(function($){ 
    var didScroll; 
    var lastScrollTop = 0; 
    var delta = 5; 
    var navbarHeight = $('nav').outerHeight(true); 

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

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

    function hasScrolled() { 
     if ($(window).width() > 768) { 
      var st = $(this).scrollTop(); 
      if (Math.abs(lastScrollTop - st) <= delta) { 
       return; 
      } 
      if (st > lastScrollTop && lastScrollTop >= 100 && st > 100) { 
       $('#screen-nav').removeClass('nav-down').addClass('nav-up'); 
      } else { 
       $('#screen-nav').removeClass('nav-up').addClass('nav-down'); 
      } 
     } 
     lastScrollTop = st; 
    } 
}); 

我有點困惑你同時使用了onscroll事件和 100ms的計時器。您可以使用其中一種或另一種來實現您的解決方案，但不需要將兩者結合使用。我可能會使用onscroll，因爲用戶不滾動時的開銷較少。只是需要考慮。