Like the fixed menu on the Amplify site?
Heres how you can make this effect work in Internet Explorer 6. We would like to thank the authors at http://www.howtocreate.co.uk where this information was made available.

Instead of using this hack, users of IE 6 should be encouraged to upgrade to IE 7. Users who cannot upgrade to IE 7 should use a superior browser, such as Opera or Firefox or Safari!

What is position: fixed;?

position: fixed; is an alternative to position: absolute; position: relative; and position: static;.

position: fixed; is basically the same as position: absolute; except that when the user scrolls the page, the element does not scroll with it, it just says exactly where it was. There are many web sites that can use this technique in order to position logos or menus around their pages

What is wrong with position: fixed;?

Nothing... The problem is that the most popular browser - Internet Explorer 6 for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no positioning at all.

Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so we will exclude IE 7 from this fix.

As a result, serveral people write scripts that use setInterval to reposition an absolutely positioned element every few miliseconds, or (ignoring Netscape 4) when the onscroll event is detected. This produces a slightly jerky effect. It would be better if the position: fixed; style could be applied in browsers that supported it, and browsers that didn't could use position: absolute; and JavaScript.

Some authors use the > CSS selector to isolate Internet Explorer and leave the element positioned absolutely in that browser, without the scrolling effect.

div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }

It produces a reasonably nice effect, but it is even better when coupled with a JavaScript that checks if the position is 'absolute' using the currentStyle property, and then repositioning the element when the onscroll event is detected.

Can it be done any better?

Well, possibly. It would be neater if it could be done with just CSS, and there is a way to take things one step closer to that. When Microsoft added their proprietary 'expression's to CSS in Internet Explorer 5, the writer of this article jumped at the chance to use these to position the absolute element. Expressions should automatically update according to changes in the browser, such as scrolling the page, or resising the window.

div#fixme {
left: expression( document.body.scrollLeft + 'px' ); 
top: expression( document.body.scrollTop + 'px' ); }

body > div#fixme { position: fixed; left: 0px; top: 0px; }

But major disappointment. Due to a bug in Internet Explorer's interpretation of expressions, it does not update this, so it just stayed at 0,0. However, while playing around with some CSS, the author noticed something slightly odd. If I assigned the value to a variable, then used that to assign it to the expression inline, it did update in Internet Explorer 5.5 and 6. It is slightly jerky, but not as bad as many script driven positioning techniques.

top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );

Of course, in Internet Explorer 6, the variable is assigned to document.documentElement.scrollTop when in standards compliant mode, so the author needed to check for this as well. IE 7 must also be excluded from the fix.

ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop
: document.body.scrollTop

And we may want to position the element somewhere other than 0,0:

top: expression( ( 10 + ( ignoreMe = document.body.scrollTop ) ) + 'px' );

Of course, this also won't validate as CSS, so the author prefers to put the extra CSS inside a conditional comment. This also allows lesser browsers like Netscape 4 to use the normal left and top positions.

#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
 position: absolute; left: 20px; top: 10px; }
body > div#fixme {
 /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
 position: fixed; }

This actually works very well, and will allow you to position static areas of your site and for them to work correctly to the viewer in IE6. There is one major issue... the static objects are now very jerky and shaky when scrolling.
To solve this, read on...

Another user trying this method discovered that adding the following code will make the fixed elements completely fixed. This will stop the shaking completely.

In adition to your code, add something like this in the style section.

body {
background-image: url("images/trans.gif");
background-repeat: no-repeat;
background-attachment: fixed;
     }

Where 'trans.gif' can be a 1x1 pixel transparent image.
This seems to make IE calculate the 'fixed' elements position before redrawing, instead of right after. This will have the effect that the elements that are fixed, will behave just like they're supposed to.

Thanks again to the original authors of this content,

Good luck with your web projects!