Question

Possible Duplicate:
How to keep the header static, always on top while scrolling?

I want to keep the header section of the web site always on top while scrolling down the page.
how can i do with CSS ? or do I have to use Jquery ?

Answer 1

Here is the DEMO

Html IS:

<div id="header" class="fixed" style="display: block; top: 0px; ">
        <div class="inner">
        <!-- .inner -->
        </div>
        <div class="shadow" style="display:block;"><span></span></div>
</div>

<div style="height:600px;"><a href="http://imgur.com/k9hz3"><img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" /></a></div> 
<div style="height:600px;"><a href="http://imgur.com/TXuFQ"><img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" /></a></div> ​

Css is:

 #header{height: 48px;width: 100%;z-index: 1000;}

.fixed {background: url(http://static.tumblr.com/njty47g/Omoleufdi/topbar_bg.png) left top repeat-x;
position: fixed;left: 0;
-webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);}

.inner {width: 940px;margin: 0 auto;height: 48px;}


.shadow{width: 100%;height: 5px;position: absolute;left: 0;bottom: -5px;z-index: 500;display: none;}
​