• Главная
  • Услуги и цены
  • Портфолио
  • Блог
  • Контакты
ABVV
  • Главная
  • Услуги и цены
  • Портфолио
  • Блог
  • Контакты

position: sticky

В CSS появилось новое нестандартное значение для позиционирования под названием sticky.

Немного поюзав новинку, решил поделится. Думаю, многие обрадуются, что больше не надо писать кучу лишнего JS кода для прилипания блока.

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

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

1
2
3
4
5
6
7
8
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

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

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