title: jQuery: How to keep a DIV at the top of the screen AND restore its position after scrolling up (and reaching its original position)
body: <p>I want a div element to do something similar to gmail. </p>
  
  <ul>
  <li><p>When scrolling down, once gmail's menu (Archive, Spam, Delete...etc) reaches the the top of the screen, it stays there. </p></li>
  <li><p>When scrolling up, the menu returns to it's original position.</p></li>
  </ul>
  
  <p>Another sample is the side bar of this page: <a href="http://www.sohtanaka.com/web-design/nomination-judge-the-net-magazine-awards/#blog" rel="nofollow noreferrer">sample 2</a></p>
  
  <p>How to achieve that with a simple (and easy to understand) jQuery code?
  (Compatible with all browsers)</p>
  
  <pre><code>&lt;div id="header"&gt;Menu goes here =)&lt;/div&gt;
  </code></pre>