Время для прочтения: 0 мин. 42 сек.

position: sticky

В CSS появилось новое нестандартное значение для позиционирования под названием sticky, предложенное Эдвардом О`Коннером в рассылке www-style.

Что это такое и с чем его едят

Это гибрид значений relative и fixed. В результате присвоения элементу значения sticky для позиционирования, он прокручивается вместе со страницей как статический, но только до указанного предела, после которого становится фиксированным.

Как использовать

Для примера добавьте в ваш CSS файл стили для элемента с классом .sticky, дописав правила с вендорными префиксами.


.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

Этим самым вы заставите элемент быть position: relative до тех пор, пока пользователь не прокрутит страницу на 15px вниз относительно родительского элемента. После этого блок с классом .sticky станет position: fixed, то есть зафиксируется на странице.

Подробнее изучить новое поведением вы можете в специальном демо, открыв его в свежей версии Chrome Canary.

Поддержка браузерами

Chromium Chrome Firefox
23.0.1247.0 Chrome Canary 43

Чтобы включить поддержку данного свойства в Firefox, перейдите на страницу скрытых настроек about:config и установите флаг layout.css.sticky.enabled в true

Чтобы включить поддержку данного свойства в Chrome 23-36, перейдите на страницу скрытых настроек chrome://flags и установите флаг experimental Web Platform features в true (удалено в версии 37+).

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Choo Hwan

    Не работает. FireBug не отображает свойство вообще.

    • Чтобы включить поддержку данного свойства в Firefox, перейдите на страницу скрытых настроект about:config и установите layout.css.sticky.enabled в true