使用JavaScript检测滚动事件

我有这个菜单，我只想显示，如果用户滚动的网站或当没有滚动发生。因此，当网站被向上滚动或没有滚动发生时，我想显示它。当向下滚动时，我想隐藏它

我目前的代码是：

    var lastScrollTop = 0;
$(window).on("scroll touchmove", function () {
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
        $('.mobile-nav').css('top',-65);
    } else {
        $('.mobile-nav').css('top',0);
    }
    lastScrollTop = st;
    $('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});

试试这个

var lastScrollTop = 0;
var timeoutID = 0;
$(window).on("scroll touchmove", function () {
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
        $('.mobile-nav').css('top',-65);
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function() {
            $('.mobile-nav').css('top',0);
        }, 500);
    } else {
        $('.mobile-nav').css('top',0);
    }
    lastScrollTop = st;
    $('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});

我添加了一个计时器，当你停止滚动时再次显示菜单，这是你的代码没有涵盖的唯一可能性

---

每当向下滚动时，它将启动0.5秒计时器，再次显示菜单。如果继续滚动，则计时器将被销毁，并创建一个新的计时器，重新开始0.5秒的检查。显然，改变500以适应您的口味：）

同样可以通过

隐藏类和固定定位完成：

var lastScrollTop = 0,
    show = function () {
        $('.mobile-nav').removeClass('hidden');
    },
    timeOut = setTimeout(show, 1000);
$(window).on("scroll touchmove", function () {
    clearTimeout(timeOut);
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        $('.mobile-nav').addClass('hidden');
    } else {
        $('.mobile-nav').removeClass('hidden');
    }
    lastScrollTop = st;
    timeOut = setTimeout(show, 1000);
    //$('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});

setTimeout
中的第二个参数表示“空闲”的毫秒数-您可以将其移动到单独的变量中，以使代码更清晰

工作提琴：
你能提供一些你的代码吗？你有什么问题吗？