CSS Position Fixed for IE6

How do you get position:fixed css working in Internet Explorer 6?

The trick is to use an Internet Explorer CSS expression. You can’t simply put the logic in there directly or it’ll cache the result and not update. The simplest fix is to wrap your logic in eval.

How do you solve the jitter issue?!

Apparently Internet Explorer has a multi-step rendering process. When you scroll or resize your browser it’ll reposition everything and redraw the page, then it processes the css expressions. This causes an ugly “jitter” where the position fixed elements take a bit to catch up with your scrolling.

The trick is to give the body or html elements a background-image with background-attachment:fixed. This forces the processing of the CSS before the page is redrawn. Since it’s processing the css again before redrawing, it’ll go ahead and process your css expressions before redrawing too. This gives you perfectly smooth position fixed elements!

I didn’t come up with this solution. I read is online somewhere. If you know who originally came up with this idea please let me know.

The one trick I did find was that you don’t even need a real image! You can use about:blank instead of a spacer.gif and it still works just fine.

CSS Code

Update: Added border, padding and margin support!

Note: If you don't need margin support, you can delete all the `parseInt` stuff.

Note: I've only tested this in standards mode.