jQuery 和 Safari 的问题

Question

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

$(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（我在 Mac 上使用运行版本 9.0.2）。发生的问题是，当您点击页面顶部并且没有进一步向上滚动的空间时，导航通过重新向上滑动再次隐藏（就好像用户实际上再次向下滚动而不是向上滚动到顶部页面）。相反的情况也发生在页面底部。

如果您查看 Safari 中的 fiddle，您就会看到我正在谈论的问题。如果您在任何其他浏览器中查看 fiddle，您就会明白我要实现的目标。

Answer 1

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

您可以使用 iNoBounce 等扩展程序禁用它。

或者像这样比较当前位置。

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

Answer 2

下面我试图为您提供两个不同的答案，第一个解决方案与您的 .nav class 有关，而第二个是模拟与函数相同的功能。因此，它可以重复使用。

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'));

要在线查看结果，请查看我的 fiddle https://jsfiddle.net/yeoman/g19nejfu/1/ 我分叉了您的问题并使用有效答案对其进行了更新。

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

jQuery scroll() detect when user stops scrolling

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

希望我的回答对您有所帮助。谢谢，干杯！

jQuery 和 Safari 的问题

An Issue With jQuery and Safari

html

javascript

safari

jquery

mobile-safari