title: Recreating Chrome iOS scrolling navigation bar effect in jquery/javascript
body: <p>I'm trying to achieve a similar effect to the way the iOS Chromes navigation bar scrolls and hides, the comes back into view when scrolling up.</p>
  
  <p>This <a href="http://jsfiddle.net/edwardomni/xh26X/" rel="nofollow">JSfiddle</a> is where I am so far.</p>
  
  <pre><code>var pos = $(window).scrollTop(),
  header = $("header");
  
  $(window).scroll(function () {
  var newPos = $(this).scrollTop();
  
  if (newPos &gt; pos) { //down 
      header.css('top', -(newPos) + 'px');
      if (pos &gt; 40) {
          header.css('top', '-40px');
      }
  } else { //up
      header.css('top', '0');
  }
  
  
  pos = newPos;
  
  $(".last span").html(pos);
  $(".new span").html(newPos);
  });
  </code></pre>
  
  <p>So the header scrolls up as you scroll down, but I can't work out how to scroll it back into view in the way I want. Tried using animate() which gave me a scroll in and out, but the animation wasn't smooth. I' want the header to move at the same speed as as the scroll, any ideas?</p>