position:fixed для IE6 | описание 4-х способов

Задача

Проэмулировать CSS свойство position: fixed для IE6, которое всеми «любимый» браузер ни в какую понимать не хочет.

Решения

Для эмуляции будем использовать expression, который будет вычислять положение нашего блока при любых изменениях размеров или положения страницы. Для этого можно использовать три варианта:

* html .fixedBlock{ /*хак для ИЕ6*/
	position: absolute;
	top: expression(eval(document.body.scrollTop) + "px");
}

* html .fixedBlock{ /*хак для ИЕ6*/
	position: absolute;
	top: expression(parseInt(document.body.scrollTop, 10) + "px");
}

* html .fixedBlock{ /*хак для ИЕ6*/
	position: absolute;
	top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
}

Наиболее подходящим из вариантов я считаю последний, так как привязка к «document.body» работает только в Quirks mode(режим совместимости), для работы и в стандартном режиме работы браузера стоит привязываться к «document.documentElement» (он же document.getElementsByTagName(«body»)[0]). Последний вариант сработает в любом из режимов и поэтому более надежен.

Возможные проблемы

Теперь ты получил рабочий пример в ИЕ6, но, если обратишь внимание, то при прокрутке страницы наш блок с position: fixed будет «дёргаться». Чтобы это устранить есть хитрое решение от гуру студии Лебедева — стоит прописать такой стиль для body:

body
{
    background:url(about:blank);
    background-attachment: fixed;
}

Демо пример.

Ещё 1 способ…

Однажды столкнулся со случаем, в котором не работал ни один из данных примеров (из за объявленного там DOCTYPE), и мне на помощь пришёл данный скрипт(он прижимает наш блок к низу нашего окна):

* html .fixedBlock{ /*хак для ИЕ6*/
	position: absolute;
	top: expression(parseInt(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight, 10) -280 + "px");
}

Где «280» — расстояние между нижними границами окна с position: fixed и окна браузера.

Заметки

• в «боевых» условиях вместо хаков следует использовать условные комментарии;
• следует помнить, что expression замедляет работу браузера. Так как для определения актуальных координат, нужно постоянно вести перерасчет в зависимости от прокрутки окна браузера, нельзя сделать оптимизированный experssion, который вычислялся бы только один раз. Потому, если страница тормозит имеет смыл попробовать решение на Javascript (материал готовится).

Материалы

• Полноценный fixed в MSIE