Эмуляция position:fixed

Автор: Егор Скорняков Дата публикации:

Задача

Проэмулировать 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

Xiper