I\'m trying to learn some of CSS3 and HTML5 but I\'m a little confused with somethings. For now, I want create a page with a fixed navbar on the top of page, that scrolls wi
What you need to use is position: fixed;
/* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
body { position: relative; padding-top: 40px; }
/* Tell the nav to stick to the top left */
nav { position: fixed; top: 0; left: 0; }
http://jsfiddle.net/ninty9notout/8J7UM/
Give margin to your content. The margin value should be the height of you header (sticky header) + 20px.
wrap you content with a div and give it padding top 100px(height of header)
as per my structure
.bodyPan{
padding-top:100px;
}
working jsFiddle file
Add margin-top to your content. The header is fixed - so it is not included within the flow of the document.
Also notice that you have opacity defined on your header - which causes you to slightly see the content when scrolling.
If this is not what you wanted - then remove it. (like so)
FIDDLE
#content{
margin-top: 100px;
z-index: 0;
position: absolute;
}
Elements with "fixed" or "absolute" position don't occupy space in the page, so a possible workaround for you is to add a margin or padding to your content:
<article id='content'>
<p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/>
<p>again</p>
<article>
#content{
margin-top: 100px;
}
http://jsfiddle.net/KUpnA/