Question

I have something like this:

<div id="navigation"></div>
<div id="header"></div>
<div id="content"></div>

The #header has "position:fixed; top: 0;", I need it to be this way except when the #navigation is visible (not scrolled away), in this case the #header should be displayed after the #navigation.

Could this be done with pure css?
Or any clean JS solution?

Here is the jsfiddle.

Answer 1

Sounds like a job for the jQuery Waypoints plugin: http://imakewebthings.com/jquery-waypoints/

Using the sticky element shortcut:

Just add

$(document).ready(function() {
    $('#header').waypoint('sticky');
})

and a style for the stuck element

#header.stuck {
    position: fixed;
    top: 0;
}

Here is the updated fiddle