title: How can I make the navigation bar to show only at the very top?
body: <p>How can I make the navigation bar re-appear only when the users scrolls at the very top? currently, the nav bar appears when the users scrolls up, irrelevant the position of the screen. </p>
  
  <p>Html </p>
  
  <pre><code>&lt;header class="nav-down"&gt;
   &lt;div&gt; navigation &lt;/div&gt;
  &lt;/header&gt; 
  </code></pre>
  
  <p>Javascript </p>
  
  <pre><code>var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('#navigation-container').outerHeight();
  
  $(window).scroll(function(event){
      didScroll = true;
  });
  
  setInterval(function() {
      if (didScroll) {
          hasScrolled();
          didScroll = false;
      }
  }, 250);
  
  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
      $('header').removeClass('navigation-container').addClass('nav-up');
  } else {
      // Scroll Up
      if(st + $(window).height() &lt; $(document).height()) {
          $('header').removeClass('nav-up').addClass('nav-down');
      }
  }
  
  lastScrollTop = st;
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header {
  height: 40px;
  position: fixed;
  top: 0;
  transition: top 0.5s ease-in-out;
  width: 100%;
  z-index: 999;
  padding-top: 50px;
  }
  
  .nav-up {
  top: -70px;
  }
  </code></pre>
  
  <p>Thanks! </p>