Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы. Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности. В демонстрации ниже при прокрутке веб-страницы вниз синий блок с навигацией доходит до верхнего края окна и «приклеивается» к нему, фиксируясь на одном месте.
В данной демонстрации липкое позиционирование осуществляется с помощью значения sticky свойства position. При этом с помощью свойства top мы указываем точку, по достижении которой при прокрутке элемент превращается в фиксированный (пример 1).
Пример 1. Использование sticky
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Приклеенная навигация</title>
<style>
body {
min-height: 1000px; /* Минимальная высота */
}
header, nav {
color: #fff; /* Цвет текста */
padding: 10px; /* Поля */
}
header {
background: #009d4b; /* Цвет фона */
}
nav {
background: #3989c9; /* Цвет фона */
position: sticky; /* Липкое позиционирование */
top: 0; /* Положение сверху */
}
</style>
</head>
<body>
<header>Название сайта</header>
<nav>Навигация по сайту</nav>
</body>
</html>
Следует понимать, что при вертикальной прокрутке для элемента имеет смысл указывать только top и bottom. При горизонтальной прокрутке будут работать только свойства left и right. Также имеет значение, чтобы высота или ширина родительского контейнера была больше размера элемента. В противном случае не будет полосы прокрутки и элемент останется на своём месте. Если в примере 1 элемент <nav> поместить внутрь <div>, то прилипание перестанет работать.
Прилипание элемента можно делать внутри блока с overflow, у которого значение задано как scroll или auto (пример 2).
Пример 2. Использование sticky и overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Приклеенный заголовок</title>
<style>
section {
height: 200px; /* Высота */
background: #f0f0f0; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
overflow: auto; /* Добавляем полосы прокрутки */
}
h2 {
background: #009d4b; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
position: sticky; /* Приклеиваем заголовок */
top: 0; /* К верхнему краю родителя */
}
div {
min-height: 500px; /* Минимальная высота */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<section>
<h2>Заголовок</h2>
<div>…</div>
</section>
</body>
</html>
Значение sticky является относительно новым и не все браузеры его поддерживают, в частности, Internet Explorer.
Автор: Влад Мержевич
Последнее изменение: 01.06.2020