title: Stop fixed positioned header to overlap navigation bar
body: <p>I have something like this:</p>
  
  <pre><code>&lt;div id="navigation"&gt;&lt;/div&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The <code>#header</code> has <code>"position:fixed; top: 0;"</code>, I need it to be this way except when the <code>#navigation</code> is visible (not scrolled away), in this case the <code>#header</code> should be displayed after the <code>#navigation</code>.</p>
  
  <p>Could this be done with pure css?<br>
  Or any clean JS solution?</p>
  
  <p>Here is the <a href="http://jsfiddle.net/pomber/v6H4Z/" rel="nofollow">jsfiddle</a>.</p>