向下滚动时隐藏菜单并在向上滚动时显示

Question

I made this snippet code to hide menu on scroll down and show on scroll up but I have some issues, when I scroll to top the menu still have fixed position, how I can resolve this problem, Thanks!
JAVSCRIPT :

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 500) {
        $('.mainmenu').addClass('nav-down');
    }
});

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.mainmenu').outerHeight();

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

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

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
        $('.mainmenu').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.mainmenu').removeClass('nav-up');
        }
    }

    lastScrollTop = st;
}

CSS :

.mainmenu {
    background: #222;
    height: 50px;
    padding: 0 15px;
    width: 80%;
    margin: 0 auto;
}
.nav-down{
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}
.nav-up {
    top: -50px;
}

Demo : jsfiddle

Answer 1

To you first listener, just add an else statement as follows:

$(window).bind('scroll', function () {

    if ($(window).scrollTop() > 150)
        $('.mainmenu').addClass('nav-down');
    else
        $('.mainmenu').removeClass('nav-down');
});

Also note that you don't need a setInterval() for the second listener, see jsfiddle

Answer 2

I tested it and it works fine!!

$(window).bind('scroll', function () {
if ($(window).scrollTop() > 500) {
    $('.mainmenu').addClass('nav-down');
}
else
{
    $('.mainmenu').removeClass('nav-down');
}
});

Answer 3

Add an else to your scrollTop with a removeClass and you should be fine, I tested it and it works. Here

$(window).bind('scroll', function () {
if ($(window).scrollTop() > 500) {
    $('.mainmenu').addClass('nav-down');
}
else
{
    $('.mainmenu').removeClass('nav-down');
}
});

Answer 4

Detect nav direction with a variable

var lastscrolltop=0;
jQuery(window).bind('scroll', function () {
        if (jQuery(window).scrollTop() > lastscrolltop)
            jQuery('.mainmenu').addClass('nav-up');
        else
            jQuery('.mainmenu').removeClass('nav-up');
        lastscrolltop=jQuery(window).scrollTop();
});

and use css transition for a smooth show/hide

.mainmenu {
    transition:all 0.5s ;
}

Answer 5

Your way is too much complicated. You can hide the menu on scroll with a simple transition using jQuery .fadeIn() and fadeOut() , without the need for css.

var lastScrollTop = 0;

$(window).scroll(function(event){

   var st = $(this).scrollTop();

   if (st > lastScrollTop){
      $('.mainmenu').fadeOut('fast');
   } else {
      $('.mainmenu').fadeIn('fast');
   }

lastScrollTop = st;

});