Show nav menu after scrolling up 50px

问题:

I want to show a sticky menu nav when scrolling up while also having a delay before showing the nav menu. I can do this with animate and opacity, but it's not as effective.

I tried to show the nav menu when scrolling up 50px from the current position, but it didn't work.

Here's the script:

var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } 
    previousScroll = currentScroll;
});

FIDDLE DEMO

Note: I saw this feature in the script for Headroom.js

How can I do this?

回答1:

Your current setup only accounts for scrolls that are greater than headerOrgOffset. If you want the slide down to happen, you need to account for cases where the scroll is less than headerOrgOffset. Since you also want a 50px buffer, I've added a -50 in the else statement.

var previousScroll = 0,
        savedScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
            reappearScroll = currentScroll - 50;
        } else {
            if (currentScroll < reappearScroll) {
                $('#header-wrap').slideDown();
            }
        }
    } 
    previousScroll = currentScroll;
});