Stop fixed positioned header to overlap navigation bar

[whowlyZoloush]

I have something like this:\[code\]<div id="navigation"></div><div id="header"></div><div id="content"></div>\[/code\]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\].Could this be done with pure css?
Or any clean JS solution?Here is the jsfiddle.