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

How would I go about keeping my header from scrolling with the rest of the page? I thought about utilizing frame-sets and iframes, just wondering if there is a easier and more user friendly way, what would be the best-practice for doing this?

Note: This answer dates from 2010. Consider position: sticky in 2021, as mentioned in another answer.

Use position: fixed on the div that contains your header, with something like

#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}

In this example, when #content starts off 100px below #header, but as the user scrolls, #header stays in place. Of course it goes without saying that you'll want to make sure #header has a background so that its content will actually be visible when the two divs overlap. Have a look at the position property here: http://reference.sitepoint.com/css/position

position: sticky;

In modern, supported browsers, you can simply do that in CSS with -

header {
  position: sticky;
  top: 0;
}

In most case, it is better than using position: fixed, since position: fixed takes the element out of the regular flow of elements.

Note:

1. The HTML structure is important while using position: sticky, since it makes the element sticky relative to the parent. And the sticky positioning might not work with a single element made sticky within a parent.
2. The parent of the element made sticky should not have the overflow property set Eg: if parent has overflow: auto or overflow: hidden, then sticky positioning might not work
3. Giving at least one of the top, bottom, left, right is important because it makes the element sticky in relation to some position.

Run the snippet below to check a sample implementation.

main{
padding: 0;
}
header{
position: sticky;
top:0;
padding:40px;
background: lightblue;
text-align: center;
}

content > div {
height: 50px;
}

<main>
<header>
This is my header
</header>
<content>
<div>Some content 1</div>
<div>Some content 2</div>
<div>Some content 3</div>
<div>Some content 4</div>
<div>Some content 5</div>
<div>Some content 6</div>
<div>Some content 7</div>
<div>Some content 8</div>
</content>
</main>

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 10;
  background: #eeeeee;
  -webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}

.header__content-text {
  text-align: center;
  padding: 15px 20px;
}

.page__content-container {
  margin: 100px auto;
  width: 975px;
  padding: 30px;
}

<div class="header">
  <h1 class="header__content-text">
    Header content will come here
  </h1>
</div>
<div class="page__content-container">
  <div style="height:600px;">
    <a href="http://imgur.com/k9hz3">
      <img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" />
    </a>
  </div>
  <div style="height:600px;">
    <a href="http://imgur.com/TXuFQ">
      <img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" />
    </a>
  </div>
</div>

If you can use bootstrap3 then you can use css "navbar-fixed-top" also you need to add below css to push your page content down

body{

   margin-top:100px;
}

here is one with css + jquery (javascript) solution.

here is demo link Demo

//html

<div id="uberbar">
    <a href="#top">Top of Page</a>
    <a href="#bottom">Bottom of Page</a>

</div>

//css 

#uberbar    { 
    border-bottom:1px solid #eb7429; 
    background:#fc9453; 
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;
}

//jquery

$(document).ready(function() {
    (function() {
        //settings
        var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
        var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
        var inside = false;
        //do
        $(window).scroll(function() {
            position = $(window).scrollTop();
            if(position > topDistance && !inside) {
                //add events
                topbarML();
                $('#uberbar').bind('mouseenter',topbarME);
                $('#uberbar').bind('mouseleave',topbarML);
                inside = true;
            }
            else if (position < topDistance){
                topbarME();
                $('#uberbar').unbind('mouseenter',topbarME);
                $('#uberbar').unbind('mouseleave',topbarML);
                inside = false;
            }
        });
    })();
});