Keeping a header always in view

Question

I am designing my website and I\'m trying to find a way to keep a header always in the screen.

For an example, take a look at this extra long page on Wikia.com. Noti

Answer 1

HTML:

    
 HEADER 
    
 NAVIGATION 
    
 CONTENT  
        

JavaScript:

( function () {    
    var nav = $( '#navigation' )[0],
        top = $( nav ).offset().top,
        left,
        height = $( nav ).outerHeight(),
        width = $( nav ).width(),
        fixedClass = 'fixed';

    function pageOffset() {
        return window.pageYOffset || document.body.scrollTop;
    }

    $( window ).
            resize( function () {
                left = $( nav ).offset().left;
            }).
            scroll( function () {
                $( nav ).toggleClass( fixedClass, pageOffset() > top );

                if ( $( nav ).hasClass( fixedClass ) ) {
                    $( nav ).
                        css({ 'left': left, 'width': width }).
                        prev().css({ 'marginBottom': height });
                } else {
                    $( nav ).
                        prev().andSelf().removeAttr( 'style' );
                }
            }).
            trigger( 'resize' );    
})();

Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/