Question

我有一些代码可以在用户向下滚动时激活我的导航功能（屏幕外），并在用户向上滚动时将其设置为动画。

然而，在Safari中，当用户以更快的速度向上滚动时，页面会弹回＆＃39;顶部有点，当用户位于顶部时，这会使我的导航动画起来。有办法解决这个问题吗？

我的代码

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进行测试，我通过取一个页面并将其身体向下推100px进行模拟，然后通过检查数字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事件和 100毫秒计时器感到有些困惑。您可以使用其中一种来实现您的解决方案，但不需要同时使用它们。我可能使用onscroll，因为当用户不滚动时，开销较少。需要考虑的事情。

解决狩猎问题＆＃39;反弹＆＃39;问题

1 个答案: