title: How to use CSS to stop an HTML element scrolling off the top of the screen
body: <p>I'm trying to set the site name/logo and the navigation on my page so that when it hits the top of the page, it stays there instead of disappearing off the top of the screen. I've tried <code>position: fixed;</code>, but unless I'm missing somthing that is not what I need to do.</p>
  
  <p>My layout is as follows, and it is <code>header-top</code> and <code>header-nave</code> that I wish to not disapear off the top of the page -</p>
  
  <pre><code>&lt;header&gt;
      &lt;div id="header-top"&gt;&lt;/div&gt;
      &lt;div id="header-middle"&gt;&lt;/div&gt;
      &lt;div id="header-nav"&gt;&lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Does anybody have any tips on this, or know if it is even possible with CSS? Either way, some pointers to tutorials or even the method to use to do this would be helpful.</p>
  
  <p>Am open to JS if that is what is needed. Thanks.</p>