Полноценный fixed в MSIE 26 марта 2007

О том, какой код нужно написать для MSIE в стилях страницы, чтобы сделать блок с фиксированной позицией, давно известно. Технологи студии пользуются разными способами решения этой задачи — каждый своим любимым.

Простая идея
Общая идея неизменна: нужно записать в CSS выражение, которое браузер станет вычислять при любом изменении размеров или положения страницы:

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

Но такой простейший вариант не работает, из-за чего и появились три разных способа обойти это:

1. с функцией eval():

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

2. с массивом:

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

3. с функцией parseInt():

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

Важный довесок
Эмуляция свойства position: fixed удалась, но удовлетворения от этого еще нет, потому что «фиксированный» блок дергается при вертикальной прокрутке.

Решение, придуманное Ромой Воронежским и Юрой Васильчиковым, непостижимо и просто — чтобы избавиться от дрожаний, нужно зафиксировать фон страницы:

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

Файл n.gif — однопиксельная прозрачная картинка (ее, кстати, даже не обязательно держать на сервере).

Показанный прием одинаково хорошо работает в браузерах MSIE уже начиная с пятой версии.

Примечание. Нужно лишь помнить, что для MSIE 7 есть более простое решение для правильной работы свойства fixed — указание доктайпа.