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

Question

How would I go about keeping my header from scrolling with the rest of the page? I thought about utilizing frame-sets and iframes, jus

Answer 1

After looking through all the answers, I found a slightly different way with minimum CSS and no JS, only the height of the header needs to be set correctly in #content, in this case 60px

CSS:

#header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}
#content {
  margin-top: 60px;
  z-index:1;
}

HTML:

  

     My Large Static Header