This is a very old thread, but I have found a pure CSS solution to this using some creative nesting. I wasn't a fan of the jQuery method at all...
Fiddle here: https://jsfiddle.net/4jeuv5jq/
<div id="wrapper">
<div id="fixeditem">
Haha, I am a header. Nah.. Nah na na na
</div>
<div id="contentwrapper">
<div id="content">
Lorem ipsum.....
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
overflow: scroll;
}
#fixeditem {
position: absolute;
}
#contentwrapper {
width: 100%;
overflow: scroll;
}
#content {
width: 1000px;
height: 2000px;
}