Question

I need help with the following issue.

I’m creating a responsive site. Its structure is quite basic: header, nav bar, body and footer.

In the header I have several elements and all these elements use percentages for their dimensions, so the height of the header is determined by the height of the elements inside of it.

For the nav bar I plan to use a “sticky” script, so when you scroll the page, the nav bar ‘sticks’ to the top of the page, and once you go back all the way up, it ‘unsticks’ and appears under the header.

So far, so good.

Thing is that the sticky script depends on the height of the header in order to correctly stick the nav bar under the header. So when I resize my window to test the responsiveness of the layout, the sticky nav bar goes crazy.

What I need is a way to detect the height of the header and modify the DOM by creating a style on the <header> ie. (<header style="height:198.3px">), and assign a dynamic height to it as I resize the browser window.

I think this is something that would be accomplished using the height(); property, but I’m not a jQuery guru so I’m not sure if that would work.

Any help is greatly appreciated.

PS. BTW, Stackoverflow.com uses this ‘sticky’ feature on the boxes on the right column when you’re creating/editing a post.

Answer 1

Something like this should get you started:

var $sticky = $('#sticky');
var $header = $('header');

$(window).scroll(function() {
    if ($(this).scrollTop() > $header.offset().top + $header.height()) {
        $sticky.css({
            top: 0,
            position: 'fixed'
        });
    } else {
        $sticky.css({
            top: 'auto',
            position: 'absolute'
        });
    }
}).trigger('scroll');​

Demo: http://jsfiddle.net/Blender/S66gR/2/

Instead of replicating CSS with JavaScript, just use what’s already there. position: fixed makes elements “stick” to the screen.