В 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+).
