Несмотря на удобство position: sticky я почти не вижу это свойство на сайтах. На данный момент свойство поддерживают 94% браузеров.

Впервые я столкнулась с “липким” позиционированием в статье, в которой автор с помощью двух строчек закрепил меню, а позже и интерактивные элементы на странице. И я подумала:” Без помощи Java Script, воу!”. Я была по-настоящему рада, что появилась такая возможность.

Четыре года назад все были знакомы с четырьмя типами позиционирования:

static, relative, absolute, fixed.

Элементы с позицией static и relative сохраняют своё положение в потоке документа, в то время как absolute и fixed “выпадают” из потока.

“Липкое” позиционирование хорошо описывает эта цитата, взятая на сайте MDN.

Липкое позиционирование можно рассматривать как гибрид относительного (relative) и фиксированного (fixed) позиционирования. Прикрепленный элемент считается относительно позиционированным до тех пор, пока он не пересечет заданный порог, после чего он считается фиксированным до тех пор, пока не достигнет границы своего родителя.

Как работает position: sticky

Элемент с position: sticky перемещается в пределах ближайшего родителя. На то, в каком месте элемент “залипнет” влияют значения свойств: top, right, bottom, left, padding, margin и transform.

После того, как свойство position примет значение sticky размер родительского контейнера не изменится, соседние элементы не сдвинутся на освободившееся место.

Можно сказать, что position: sticky гибрид не только относительного и фиксированного позиционирования, но и абсолютного ( position: absolute ). Элемент остается в потоке и сохраняет свою позицию. С началом перемотки элемент ведет себя так, словно свойство стало fixed. В конце останавливается в контейнере поверх другого элемента.

Примеры.

Элемент “прилипнет” к верхнему краю окна браузера.

.sticky-element {
position: sticky;
top: 0;
}

При добавлении элементу стилей top: 3rem элемент “прилипнет” к верхнему краю окна браузера с отступом в 3rem.

.sticky-element {
position: sticky;
top: 3rem;
}

Если же добавить элементу margin: 2rem , то элемент “отлипнет” за 2rem от нижнего края контейнера.

.sticky-element {
position: sticky;
top: 0;
margin: 2rem;
}

Элемент “прилипнет” к нижнему краю браузера.

Элемент “прилипнет” то к нижнему краю, то к верхнему.

.sticky-element {
position: sticky;
top: 0;
bottom: 0;
}

Элемент “прилипнет” внутри блока с прокруткой, а не к краю браузера.

.container {
overflow: auto;
height: 15rem;
}
.sticky-element {
position: sticky;
top: 0;
}

Применение

С помощью position: sticky можно закрепить меню или футер на сайте, а также сайдбар. Сделать слайдер или галерею.