Верх страницы
Обложка к записи position: sticky
Время для прочтения: 0 мин. 14 сек.

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

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

2 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Choo Hwan
Choo Hwan
8 лет назад

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

mihdan
8 лет назад
Ответить на  Choo Hwan

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

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы