title: How to hide/show nav bar when user scrolls up/down
body: <p>Hide/show nav bar when user scrolls up/down</p>
  
  <p><strong>Here's the example I'm trying to achieve:</strong>
  <a href="http://haraldurthorleifsson.com/" rel="noreferrer">http://haraldurthorleifsson.com/</a>
  or
  <a href="http://www.teehanlax.com/story/readability/" rel="noreferrer">http://www.teehanlax.com/story/readability/</a></p>
  
  <p>The navigation bar slides up off screen when you scroll down and slides back down on screen when you scroll up. I've figured out how to do it with fade in/fade out but I would like to achieve it with the exact same animation as in the example. <em>Note: I already tried SlideIn() and like the way that it does the stretching animation...</em></p>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>var previousScroll = 0,
  headerOrgOffset = $('#header').offset().top;
  
  $('#header-wrap').height($('#header').height());
  
  $(window).scroll(function() {
      var currentScroll = $(this).scrollTop();
      console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
      if(currentScroll &gt; headerOrgOffset) {
          if (currentScroll &gt; previousScroll) {
              $('#header').fadeOut();
          } else {
              $('#header').fadeIn();
              $('#header').addClass('fixed');
          }
      } else {
           $('#header').removeClass('fixed');   
      }
      previousScroll = currentScroll;
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#header {
      width: 100%;
      z-index: 100;
  }
  
  .fixed {
      position: fixed;
      top: 0;
  }
  
  #header-wrap {
      position: relative;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div id="header-wrap"&gt;
      &lt;div id="header" class="clear"&gt;
          &lt;nav&gt;
              &lt;h1&gt;Prototype&lt;/h1&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>