Перейти в телеграм, чтобы получить результаты теста
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
Часто при верстке сайтов возникает необходимость зафиксировать определенный элемент, например, навигационную панель, так, чтобы она оставалась видимой при прокрутке страницы. В 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 позволяет создавать «прилипающие» элементы, которые остаются на своем месте при прокрутке страницы до тех пор, пока они полностью не исчезнут из виду. Это удобно для создания навигационных панелей, боковых меню и других элементов, которые должны быть всегда видны пользователю.
На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.
Добавить комментарий