Alt-Web Design & Publishing
CSS Sticky-Header Demo
Description:
If your browser supports Fixed Positioned divisions - as most modern browsers do, you should see a semi-transparent header at the top of your screen. As you scroll up, down, or resize viewport, the header remains in view (fixed).
Method:
CSS Code
#Sticky {
color:#FFF;
border: 2px solid orange;
position:fixed;
/**adjust location**/
left: 0px;
top: 0px;
padding: 0 10px 0 10px;
width: 100%;
min-width: 1000px;
background: url(transparent.png) repeat;
}
Html Code
<body>
<!--Place this near the top of your HTML markup-->
<div id="Sticky">
<p>Here is a Sticky Header</p>
</div>
<!--end sticky header-->
</body>
</html>
