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

Ссылки

Источник: https://www.kobzarev.com/makeup/position-sticky/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: