title: How to make a div stick to top when it reaches the top of the window
body: <p>How do I make <code>#headnav</code> stick to the top when the page's scroll position reaches the top, then unstick when it would be returned to its original position?</p>
  
  <p>P.S. The repeated "CONTENT" in the code is to simulate scrolling. It is not a spam</p>
  
  <p><a href="http://jsfiddle.net/5z4paLgr/" rel="nofollow">jsFiddle</a></p>
  
  <pre><code>&lt;h1&gt;I AM A HEADER&lt;/h1&gt;
  &lt;div id="headnav"&gt;&lt;/div&gt;
  &lt;pre&gt;&lt;h1&gt;
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
      CONTENT
  &lt;/h1&gt;&lt;/pre&gt;
  </code></pre>
  
  
  
  <pre><code>body {
      margin:0
  }
  
  #headnav {
      height: 75px;
      width: 100%;
      background-color: black;
  }
  </code></pre>