@main[] ^header[True fixed in MSIE] ^maindir[2]
HTML XSLT JavaScript Etc
^portrait[ash]
Andrey Shitov ^email[ash;]

True fixed in MSIE 26 March 2007


 
Task: Show what it takes to emulated CSS-property position: fixed.

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&6;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"
);
See Vladimir Tokmakov&6;s article &7;Fixed positioning in IE&8;

This block is fixed when you scroll up/down and


in MSIE.


What matters
Position: fixed is emulated, but it&6;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&1;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&6;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&1;you can declare doctype.
^include[/bottomblok.html]