Skip to content Skip to sidebar Skip to footer

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

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

Post a Comment for "Show Nav Menu After Scrolling Up 50px"