Position: sticky

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

Данные с сата Can I Use

Впервые я столкнулась с “липким” позиционированием в статье, в которой автор с помощью двух строчек закрепил меню, а позже и интерактивные элементы на странице. И я подумала:” Без помощи 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 можно закрепить меню или футер на сайте, а также сайдбар. Сделать слайдер или галерею.

Поделиться:

Теги:

    Сделаем это вместе -
    У вашего бизнеса есть история

    Заказ обратного звонка

    Мы перезвоним вам в течение часа или в удобное для вас время

    Live Chat
    ×