jQuery和Safari的一个问题

我正在尝试创建一个导航栏，当用户向下滚动时向上和向下滑动屏幕，然后当用户停止滚动/向上滚动时向下滚动。下面是我的脚本的片段和的jsfiddle：jQuery和Safari的一个问题

$(document).ready(function() { 

var position = $(window).scrollTop(); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll > position) { 
      $('.nav').addClass('active'); 
     } else { 
      $('.nav').removeClass('active'); 
     } 
     position = scroll; 
    }); 
});

https://jsfiddle.net/z2uc89sL/

再加上我的CSS这适用于所有我在测试它除了Safari浏览器（我运行9.0版浏览器的罚款。 2在Mac上）。正在发生的问题是，当您点击页面顶部并且没有更多空间可以向上滚动时，导航会通过重新滑动而再次隐藏（就好像用户实际上再次向下滚动，而不是碰到顶端的页面）。相反的情况也发生在页面的底部。

如果你看看Safari中的小提琴，你会看到我正在谈论的问题。如果你在任何其他浏览器中看小提琴，你会看到我想要实现的。

来源

2016-01-23 danMad

下面我想给你提供两个不同的答案，而第二个是相同的功能的功能仿真首先解决是关系到你的.nav类。所以，它可以被重用。

var el = $(".nav"); 
$(window).scroll(function() { 
    el.addClass('active'); 
    clearTimeout($.data(this, "scrollCheck")); 
    $.data(this, "scrollCheck", setTimeout(function() { 
     el.removeClass('active'); 
    }, 250)); 
}); 

/* 
* As a Function 
*/ 
function scrollFunc(el) { 
    var el = el; 
    $(window).scroll(function() { 
     el.addClass('active'); 
     clearTimeout($.data(this, "scrollCheck")); 
     $.data(this, "scrollCheck", setTimeout(function() { 
      el.removeClass('active'); 
     }, 250)); 
    }); 
} 
scrollFunc($('nav'));

要在网上看到的结果，请看看我的小提琴https://jsfiddle.net/yeoman/g19nejfu/1/我叉你的问题，并与工作回答更新。

我想解释一下发生了什么，但实际上这个问题已经以某种方式回答了。所以，为此，我会分享一些有用的链接。人们应该检查出来了解它。

jQuery scroll() detect when user stops scrolling

http://gabrieleromanato.name/jquery-check-if-users-stop-scrolling/

希望我的答案你。谢谢，干杯！

来源

2016-01-26 13:03:03 Danish

谢谢你。你拯救了我的生命:) – danMad

@DanMad非常高兴听到这个消息。让我知道，如果你需要任何进一步的帮助来理解上述答案，甚至任何其他事情！干杯:) – Danish

这是因为safari中的弹跳效果。

你可以通过一些扩展如iNoBounce来禁用它。

或简单地比较一下当前位置。

if (scroll > position && position > 0) { 
    $('.nav').addClass('active'); 
} else if (position < $(window).height()){ 
    $('.nav').removeClass('active'); 
}

来源

2016-01-26 05:33:57 emil

jQuery和Safari的一个问题

回答

相关问题