True fixed in MSIE March 26, 2007

Stylesheet code that allows fixing an element on the page is a known thing. Our technologists use different techniques whichever one they fancy the most.

Simple idea
The general idea is to create a CSS expression to be calculated every time page sizes or position change:

top: expression(document.body.scrollTop + "px");
				

But this elementary code doesn’t work, so here are three other ways:

1. using function eval():

top: expression(
    eval(document.body.scrollTop) + "px"
);
				

2. using an array:

top: expression(
    document.getElementsByTagName("body")[0].scrollTop + "px"
);
				

3. using function parseInt():

top: expression(
    parseInt(document.body.scrollTop, 10) + "px"
);
				

What matters
Position: fixed is emulated, but it’s not yet good enough because scrolling the page causes the block to jitter.

Roma Voronezhsky and Yura Vasilchikov have come up with a strikingly simple solution—you can avoid jitter by fixing the page background:

body
{
    background: url('/n.gif') no-repeat;
    background-attachment: fixed;
}
				

File n.gif is a one-pixel transparent image (and you don’t even have to upload it to server).

This approach works well for all browsers starting from MSIE 5.

Note: Keep in mind that for MSIE 7 there is a better way to deal with fixed—you can declare doctype.