title: Hide menu on scroll down and show on scroll up
body: <p>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! <br/>
  JAVSCRIPT :</p>
  
  <pre><code>$(window).bind('scroll', function () {
      if ($(window).scrollTop() &gt; 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) &lt;= 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 &gt; lastScrollTop &amp;&amp; st &gt; navbarHeight){
          // Scroll Down
          $('.mainmenu').removeClass('nav-down').addClass('nav-up');
      } else {
          // Scroll Up
          if(st + $(window).height() &lt; $(document).height()) {
              $('.mainmenu').removeClass('nav-up');
          }
      }
  
      lastScrollTop = st;
  }
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Demo : <a href="http://jsfiddle.net/uikithemes/s6mLJ/3066/" rel="nofollow">jsfiddle</a></p>