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

Position fixed

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

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

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

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

<!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>

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

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

Файлы: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки