Question

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

我目前的代码是：

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

Answer 1

试试这个......

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以满足您的口味：）

Answer 2

hidden类和固定定位可以做同样的事情：

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中的第二个参数是毫秒的空闲＆＃34;空闲＆＃34; - 您可以将其移动到单独的变量，以使代码更清晰。

工作小提琴：http://jsfiddle.net/neustroev_ai/L8y2cwyz/

使用JavaScript检测滚动事件

2 个答案: