We would like to know how to fixed Header while scrolling.
<html>
<head>
<style>
div.header {<!--from w w w . j av a2 s .c om-->
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 20px;
font-size: 28px;
color: #ffffff;
background-color: #666666;
border-style: solid;
border-width: 2px;
border-color: #000000;
}
p {
width: 300px;
padding: 5px;
color: #000000;
background-color: #FFFFFF;
border-style: solid;
border-color: #000000;
border-width: 2px;
}
p.one {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="header">Beginning Web Programming</div>
<p class="one">This page has to contain several paragraphs so you
can see the effect of fixed positioning. Fixed positioning has been
used on the header so it does not move even when the rest of the page
scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
<p>This page has to contain several paragraphs so you can see the
effect of fixed positioning. Fixed positioning has been used on the
header so it does not move even when the rest of the page scrolls.</p>
</body>
</html>
The code above is rendered as follows: