title: Making header act like google chrome mobile app address bar
body: <p>I have a header that I have fixed to the top of the window. I have it appear when the user scrolls up and disappear when the user scrolls down. Right now it just uses <code>.show()</code> and <code>.hide()</code>. I am trying to get it to act like the address bar on the google chrome mobile app i.e. when the user scrolls up the nav bar is stationary until the top of the window reaches the top of the nav div.</p>
  
  <p>If there is anything you do not understand please ask</p>
  
  <p>here is the jquery that I have so far</p>
  
  <pre><code>    $(window).scroll(
  {
      previousTop: 0
  }, 
  function () {
  var currentTop = $(window).scrollTop();
  
  if (currentTop &lt; 80) {
      $('#top').css ({position: 'absolute'});
  } else {
      $('#top').css ({position: 'fixed'});
      if (currentTop &lt; this.previousTop) {
          $("#top").show();
      } else {
          $("#top").hide();
      }
      this.previousTop = currentTop;
  }
  });
  </code></pre>