There are four basic approaches – each with it’s own set of advantages and disadvantages.
The first is old-school – framesets. Simple to implement, but prevents direct linking and is piss-poor for accessibility.
Second up is Javascript – works great if .js is available, but takes a decent amount of code and not everyone has javascript enabled. (or just selectively enable it using things like the noscript plugin for FF). On the whole I consider this approach a waste of bandwidth.
Third is position:fixed in the CSS. Unfortunately it’s unreliable and unpredictable cross-browser and on the whole, you’re better off skipping it though in RARE cases if proper care is taken, it’s the fastest way of doing it.
Finally there’s “fake fixed” – it’s a bit complicated to implement but works in just about every browser and is a pure HTML/CSS solution, even for browsers that don’t have position:fixed available.
The trick is this:
<body>
<div id="someFixedElement">
This is the element that will behave like it's fixed.
</div>
<div id="scrollWrapper">
Normal content goes inside here, anything inside this div will scroll.<br />
Anything absolute positioned outside this DIV will not scroll.
</div>
</body>
with this CSS:
html, body {
height:100%;
overflow:hidden;
}
#someFixedElement {
position:absolute;
top:50px;
left:50px;
width:100px;
padding:1em;
background:#CCC;
}
#scrollWrapper {
height:100%;
overflow:auto;
}
Setting HTML and BODY to 100% height and overflow:hidden removes the ability for those elements to make scrollbars – by making a wrapping DIV handle the scrolling, anything absolute positioned outside #scrollWrapper will not scroll, only stuff inside #scrollWrapper will.
I have an old demo from a few years ago that shows this in action.
http://battletech.hopto.org/html_tutorials/fixed_element.html
While not as simple as position:fixed, it does work all the way back to IE 5.x – just be warned that this technique has some problems – right positioning for example will overlap the scrollbar… Both this method and position:fixed also can bring Gecko and Webkit based browsers to their knees on performance if you use any CSS3 properties that involve transparencies on your page; basically it makes scrolling painful at best, annoying enough for users to walk away from the page at worst. (hover effects using text-shadow and box-shadow can cause similar issues - amazingly IE9 and Opera actually handle them better!)
Or at least, that’s the four ways I know of handling it – there are likely more out there.