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.

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

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

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

Ссылки

• CSS: position
• Sticky — новое слово в позиционировании
• Stick your landings! position: sticky lands in WebKit
• Демо
• Can i use…

CSS