Часто при верстке сайтов возникает необходимость зафиксировать определенный элемент, например, навигационную панель, так, чтобы она оставалась видимой при прокрутке страницы. В CSS для этого используется свойство position: sticky;.
Вот базовый пример HTML-кода, в котором используется это свойство:
<html>
<body>
<header style="position: sticky; top: 0;">
Я зафиксированный заголовок
</header>
<main>
Содержимое страницы
</main>
</body>
</html>
И CSS-кода:
header {
position: sticky;
top: 0;
}
В этом примере заголовок <header> будет «прилипать» к верхней части окна просмотра, когда пользователь прокручивает страницу вниз.
Однако, чтобы свойство position: sticky; работало корректно, необходимо учесть несколько важных моментов:
-
position: sticky;будет работать только тогда, когда на родительском элементе не установлено свойствоoverflowсо значениемhidden,scrollилиauto. -
Свойство
position: sticky;не будет работать, если родительский элемент имеет меньшую высоту, чем «прилипающий» элемент. В таком случае, «прилипающий» элемент просто останется на своем месте. -
Для корректной работы
position: sticky;необходимо указать положение «прилипающего» элемента относительно окна просмотра с помощью свойствtop,right,bottomилиleft. Например,top: 0;означает, что элемент будет «прилипать» к верхней части окна просмотра.
Итак, свойство position: sticky; в CSS позволяет создавать «прилипающие» элементы, которые остаются на своем месте при прокрутке страницы до тех пор, пока они полностью не исчезнут из виду. Это удобно для создания навигационных панелей, боковых меню и других элементов, которые должны быть всегда видны пользователю.
Добавить комментарий