CSS position: sticky
Элемент со значением sticky переключается между relative и fixed в зависимости от положения прокрутки. Он остаётся relative до достижения определённой точки прокрутки, а затем прилипает на месте, как фиксированный элемент.
Примечание: Для работы sticky-позиционирования необходимо задать хотя бы одно из свойств top, right, bottom или left.
Пример
Когда sticky-элемент достигает верха страницы (top: 0), он прилипает там.
<style> задайте классу div.sticky position sticky, top 0, зелёный фон и зелёную рамку. Добавьте sticky-div, за которым следует достаточно контента для прокрутки, чтобы div прилипал к верху, как только достигает его.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.sticky {
position: sticky;
top: 0;
background-color: green;
color: white;
padding: 10px;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Scroll down this page. The green box sticks to the top once it reaches it.</p>
<div class="sticky">I am sticky!</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
</div>
</body>
</html>
Типичное применение sticky-позиционирования
Sticky-позиционирование часто используется для прилипающих заголовков (навигационных панелей, остающихся вверху при прокрутке), прилипающих боковых панелей и прилипающих заголовков таблиц.
В сравнении с fixed: sticky-элемент сначала ведёт себя как relative-элемент и занимает место в документе, прилипая только после определённого порога прокрутки, при этом соблюдая границы своего родителя. Fixed-элемент всегда закреплён относительно окна просмотра, не занимает места и игнорирует своего родителя.
Все CSS-свойства позиционирования
Краткий обзор свойств позиционирования:
bottom— задаёт нижний край позиционированного блока.clip— обрезает абсолютно позиционированный элемент.left— задаёт левый край позиционированного блока.position— задаёт тип позиционирования элемента.right— задаёт правый край позиционированного блока.top— задаёт верхний край позиционированного блока.