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

Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы. Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности. В демонстрации ниже при прокрутке веб-страницы вниз синий блок с навигацией доходит до верхнего края окна и «приклеивается» к нему, фиксируясь на одном месте.

В данной демонстрации липкое позиционирование осуществляется с помощью значения 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.

См. также

Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа меню прилипало к верхнему краю браузера.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Навигация</title> <style> body { min-height: 1000px; } ul { background: #b41a83; padding: 10px 15px; position: sticky; top: 0; } li { list-style: none; display: inline; margin-right: 15px; } a { color: #fff; text-decoration: none; } </style> </head> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="results.html">Results</a></li> <li><a href="news.html">News</a></li> <li><a href="players.html">Players</a></li> <li><a href="table.html">Table</a></li> </ul> </body> </html>

Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа блок с картинками социальных сетей прилипал к верхнему краю браузера.

Рис. 1

Файлы

if_vk.png

if_twitter.png

if_facebook.png

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Социальные сети</title> <style> body { background: #f8f8f8; margin: 0; } main { width: 400px; margin: 10px auto; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); min-height: 1000px; padding: 20px; } .social { width: 64px; padding: 10px; float: left; position: sticky; top: 0; } header, footer { background: #333; color: #fff; padding: 20px; } header h1 { margin: 0 auto; width: 440px; font: normal 24px Arial, Helvetica, sans-serif; } </style> </head> <body> <header><h1>Максимум</h1></header> <div class="social"> <a href="#"><img src="image/if_vk.png" alt=""></a> <a href="#"><img src="image/if_twitter.png" alt=""></a> <a href="#"><img src="image/if_facebook.png" alt=""></a> </div> <main> <p>Максимум притягивает разрыв функции, дальнейшие выкладки оставим студентам в качестве несложной домашней работы. Матожидание транслирует неопределенный интеграл. </p> </main> <footer>Подвал</footer> </body> </html>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 01.06.2020

Редакторы: Влад Мержевич