CODEWITHSUNDEEP
cssscrollcss-position
pomber
pomber

Reputation: 23980

Stop fixed positioned header to overlap navigation bar

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.

Upvotes: 0

Views: 1105

Answers (2)

Brian O&#39;Neill
Brian O&#39;Neill

Reputation: 5185

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

Upvotes: 1

Mikael Kessler
Mikael Kessler

Reputation: 1235

Here's a solution using jQuery.

Updated JSFiddle

//Checks if navigation is visible and sets position of header accordingly
function headerPosition(){
    if($('#navigation').is(':visible')){
        $('#header').css('position', 'static');
    }
    else{
        $('#header').css('position', 'fixed');
    }
}

//Run function to set correct header position
headerPosition();

//Show/Hide navigation to see function in action - not needed for production
$('button').on('click', function(){
   $('#navigation').toggle();
   headerPosition();
});

Upvotes: 0

Related Questions