ZODIOS.net

Как заставить работать position:fixed в IE6

10.26.2008  –  Рубрика: HTML&CSS

Многие наверняка знакомы с таким параметром CSS как position:fixed. Суть position:fixed состоит в том, что блок располагается в координатах относительно окна браузера, а не содержимого как это происходит с position:absolute. То есть при прокрутке контента страницы, блок у которого установлено position:fixed всегда находиться на одном и том же месте вне зависимости от скрола.

Довольно полезное свойство, когда нужно сделать эмуляцию фрейма или какой-то попап. Но особенность в том, что всеми любимый браузер Internet Explorer 6 не поддерживает параметр position:fixed.

Решение этой проблемы состоит в использовании технологии, которую внедрили разработчики Internet Explore – expression. Это выражения, которые вставляются в стили и выполняют определенные расчеты (из официальных источников недавно стало известно, что разработчики отказались от этой технологии в Internet Explorer 8, теперь осталась только надежа на хаки и условные комментарии или адекватную поддержку стандартов).

Решение проблемы с position:fixed в IE6 состоит в том, что блок позиционируется абсолютно, но координата, по которой он позиционируется, пересчитывается с помощью expression. То есть, для браузера Internet Explorer 6 необходимо задать в селекторе такое правило.

#slidingDiv {
  position: absolute;
  top: expression(document.getElementsByTagName( 'body' )[0].scrollTop + "px");
}

Теперь есть два нюанса. Первый состоит в том, что в Internet Explorer фиксированное окно будет дрожать при прокрутке, для того чтоб это избежать необходимо добавить ниже следующий стиль (картинку можно не загружать на сервер). Второй состоит в том, что в Internet Explorer это все будет работать только когда не задан доктайп вначале документа!

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

Осталось выбрать способ, каким это правило будет выполняться только в Internet Explorer. Можно воспользоваться условными комментариями (подробней об условных комментария можно прочитать в заметке Условные комментарии для IE), или хаками под Internet Explore (подробней о хаках в заметке Хаки – краткий путь к кроссбраузерности?).

Пример реализации position:fixed в IE6

Источник материала