html网页结构topbar,html - Fixed Topbar and Content Div - Stack Overflow

I'm new to HTML and CSS and having some beginner troubles.

I want to have a fixed navigation bar on the top (which is fixed) so it would stick on the top even if the user scrolls the page.

and below is the content page.

how I want the page to act is that when the user scrolls the page the content page should go under the navigation bar.

in my case the the navigation bar is fixed but when scrolled the content div covers the navigation bar.

my codes are as follows

Sign In/Up

and the css code is as follows:

body{

margin:0;

}

#TopBar{

background-color:#FFFFFF;

width:100%;

height:100px;

color:#174269;

position:fixed;

font-weight:bold;

font-size:1.2em;

border-bottom:1px ridge black;

}

.fixedwidth{

width:1050px;

margin:0 auto;

}

#logodiv {

float:left;

padding-bottom:5px;

}

#logodiv img{

width:188px;

height:100px;

}

#signInDiv{

float:right

}

#signInDiv img{

position:relative;

top:6px;

}

#signInDiv p{

position:relative;

top:20px;

}

.break{

clear:both;

}

#mainContentDiv{

position:relative;

top:100px;

width:100%;

height:1000px;

background-color: #0C7ECC;

}

I know that it has an easy solution but just can't figure it out.