javascript - Hide menu on scroll down and show on scroll up -

i made snippet code hide menu on scroll down , show on scroll have issues, when scroll top menu still have fixed position, how can resolve 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 scroll more delta     if(math.abs(lastscrolltop - st) <= delta)         return;      // if scrolled down , past navbar, add class .nav-up.     // necessary never see "behind" navbar.     if (st > lastscrolltop && st > navbarheight){         // scroll down         $('.mainmenu').removeclass('nav-down').addclass('nav-up');     } else {         // scroll         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

to first listener, add else statement follows:

$(window).bind('scroll', function () {      if ($(window).scrolltop() > 150)         $('.mainmenu').addclass('nav-down');     else         $('.mainmenu').removeclass('nav-down'); }); 

also note don't need setinterval() second listener, see jsfiddle