Липкое позиционирование

Недавно узнал об этом простом и эффективном способе позиционировании элементов на сайте. В этой статье покажу насколько все просто решается задача липкого позиционирования с помощью свойства css — sticky.

Очень часто бывает необходимо закрепить элементы сайта при скроллинге на определенной позиции в пределах одного блока. Например, у вас есть меню которое находится под шапкой сайта и при скроллинге, когда меню достигает верхней позиции браузера, его необходимо закрепить. Для этой задачи в css  и появилось новое позиционирование sticky.

Элемент с «прилипающим» позиционированием (position: sticky) рассматривается как гибрид относительного и фиксированного элементов.

.banner {
 position: sticky;
 top: 150px;
}

В данном примере элемент с классом banner будет скроллится пока не достигнет уровня от верхнего края браузера 150px. Как только расстояние от верхнего края браузера до нижней границы родительского элемента будет меньше высоты элемента с позиционирование sticky, свойство position: sticky, как обычное относительное позиционирование.

Так как элемент с position: sticky перемещается в пределах родительского элемента необходимо чтобы родительский элемент минус отступ сверху был значительно выше высоты самого элемента с позиционированием sticky. В противном случае данное свойство sticky сработает как обычный position: relative.

На данный момент свойство position: sticky является новым, поэтому не поддерживается всеми старыми браузерами.

Смотрим 2 примера в видео, ставим лайки и делимся с друзьями.