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. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.

This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.

I tried looking at an example on DynamicDrive (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.

Can someone please help me do this?

Thanks in advance.
~DragonXDoom

P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.

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. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.

This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.

I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.

Can someone please help me do this?

Thanks in advance.
~DragonXDoom

P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.

• javascript
• css
• html

• My answer (which is accepted by the OP) was deleted due to a dead link. I have updated my answer with code and a working demo on jsfiddle. I'll try to get my answer un-deleted (I can't do it myself)... – Šime Vidas Commented Oct 16, 2011 at 13:25

5 Answers 5

Always remember if you have to stick the header or footer { position : fixed; } can be used.

So apply CSS like this:

.header{
    top:0;
    width:100%;
    height:50px;
    position:fixed;  // this is the key
}

HTML:

<div id="wrap">
    <div id="header"> HEADER </div>
    <div id="navigation"> NAVIGATION </div>
    <div id="content"> CONTENT  </div>        
</div>

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/

If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

Or just to the of the the page:

.top-bar {
  margin: 0;
  width: 100%;
}

You could use CSS positioning to solve this. The following link has instructions on what you need I believe.

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Edit: Sorry I misread, these should work for headers as well.

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

http://davidchambersdesign.com/css-fixed-position-headers/

Hope these help.

//header//

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
        <meta name="Description" content="<?php echo $SITE_NAME;?>" />
        <meta name="robots" content="all, index, follow" />
        <meta name="distribution" content="global" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><?php echo SITE_NAME;?></h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="/photosharing/">Home</a></li>
    <!--
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact us</a></li>-->
    </ul>
    </div>
    <div id="content">

//footer


</div>
<div id="footer">
        Copyright &copy; <?php echo SITE_NAME.' , '.date('Y');?>
    </div>
</body>
</html>

//css
body,td,th {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}
body {
    margin-left: 0px;
    margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
    margin: 0 30px;
    background: #fff;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 100%;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
    clear: left;
    padding: 20px;
}

#content h2
{
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
}

#footer
{
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}