Position: fixed; - фиксируем блок на странице

От начала и до конца. В этой заметке я объясню как кроссбраузерно сделать position:fixed с помощью CSS и избавится от подергивания блока при прокрутке в ИЕ.

Сразу скажу - за все время, проведенное в сети, я заметил, что блоки с фиксированным положением на странице (не зависящим от скролла), довольно мало используются. Нет, разумное использование таких элементов на сайте не осуждается общественностью. Скорее дело в другом - фиксированные блоки неизбежно привлекают внимание посетителя при прокрутке страницы. Он отвлекается от своей цели - и, как правило, немного раздражается.

Ситуация усугубляется тем, что блоки с фиксированным позиционированием часто используются для рекламы - по определению яркой и бросающейся в глаза. Ну и если посмотреть in general, если я двигаю скролл - по законам природы, всё на странице должно скроллиться.

Ясно, что описываемую возможность нужно использовать ненавязчиво, и более того, три раза подумав. Ну да ладно - хватит о короле, давай о тебе:

Сначала сделаем себе простецкий html-документ:

<html>
<head>
   <style type="text/css">
      #container {
         height: 2000px;
         position: relative;
      }
      #fixed-div {
         width: 100px;
         height: 100px;
         border: 1px solid red;
         position: fixed;
         top: 200px;
         left: 200px;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="fixed-div">
         Fixed Div
      </div>
   </div>
</body>
</html>

Блок fixed-div мы будем фиксировать. Для наглядности я указал ему ширину и высоту по 100 пикселей и границу красного цвета. Здесь же указан нужный нам тип позиционирования и положение относительно родителя (top и left). Блок container - содержащий контейнер (родитель) для нашего блока (для этого указано объявление position:relative;). Высота 2000 пикселей указана, чтобы появился скролл у body.

В мозилле и опере все работает, можете проверить. Если указать доктайп для документа, например такой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

то заработает и в ИЕ7. Осталось заставить ИЕ6 отображать то, что нам нужно. Этого можно добиться, указав для него абсолютный тип позиционирования + вычисление значения свойства top через expression. Используя conditional comments, напишем стили только для эксплореров:

<!--[if IE]>
   <style type="text/css">
      #fixed-div {
         position: absolute;
         left: 200px;
         top: expression(eval(document.body.scrollTop + 200) + "px");
      }
   </style>
<![endif]-->

Здесь используется метод expression (к слову работающий только в ИЕ), который с помощью javascript и dom вычисляет сдвиг нашего абсолютно позиционированного блока относительно скролла окна.

Теперь работает и в ИЕ6. И все было бы хорошо, если бы блок не дергался при прокрутке в ИЕ. Но и это решаемая задача - достаточно просто зафиксировать фон body. Можно в качестве фона поставить классический однопиксельный gif. А можно и не ставить - удивительно, но и без картинки будет работать. Просто добавьте стили:

<style type="text/css">
   body {
      background: url('/n.gif') no-repeat;
      background-attachment: fixed;
   }
</style>

Копирайт этого решения, судя по всему, указывает на студию Лебедева.

В прикрепленных файлах находится собранный в кучу код странички - разбирайте, модифицируйте, используйте!

Прикрепленный файл	Размер
fixed-div.html	693 байта

Публикаций —	118
Комментариев —	355
Пользователей —	62

Статьи и справочные
материалы

Поискать на сайте

Навигация

Цитаты и афоризмы:

Туча тегов

Вход в систему