javascript - 更新 : Add more control: hide header on scroll and work from a certain width size

Question

再次更新了这个问题:

我有一个可用的现有脚本，但我唯一想要更多控制的是指定向上/向下滚动的容差以及显示或隐藏菜单的时间。目前，菜单在滚动44px(增量值)后首先向上滑动——这没问题——但在那之后，我希望菜单直接在滚动时向上或向下滚动。当您将增量值设置为 0px 时，您可以明白我的意思，但它在第一次滚动时没有延迟(明白吗？)。

第二件事是我想在脚本中添加一个函数，让我可以控制它从哪个宽度开始工作。我希望它在 667px 及以下工作，并且在超过该值时不工作(有些类似于媒体查询)。

JSFiddle

// Hide header on scroll down //

var didScroll;
var lastScrollTop = 0;
var delta = 44;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
    hasScrolled();
    didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
    return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
    // Scroll Down
    $('header').addClass('nav-up');
} else {
    // Scroll Up
    if(st + $(window).height() < $(document).height()) {
        $('header').removeClass('nav-up');
    }
}

lastScrollTop = st;
}

Answer 1

两个问题/两个答案:

但在那之后我希望菜单可以直接向上或向下滚动

1. 将增量设置为 0

另外，250 的值(value)是多少？似乎看不到它的作用？

1. 250 是检查用户是否滚动的间隔