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中的小提琴，你会看到我正在谈论的问题。如果你在任何其他浏览器中查看小提琴，你会看到我想要实现的目标。

Answer 1

这是因为野生动物园的弹跳效应。

你可以使用iNoBounce等扩展来禁用它。

或者简单地比较当前的位置。

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

Answer 2

下面我尝试为您提供两个不同的答案，第一个解决方案与您的.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/

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

jQuery和Safari的问题

2 个答案: