Как создать фиксированный заголовок в CSS?
Чтобы создать фиксированный заголовок (или sticky header) в CSS, вам нужно использовать свойство position с значением
fixed или sticky. Давайте рассмотрим оба подхода более подробно.
1. Использование position: fixed
Свойство fixed позволяет фиксировать элемент на экране, независимо от того, как пользователь прокручивает страницу.
Заголовок будет оставаться видимым в верхней части окна браузера.
Пример кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фиксированный Заголовок</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
position: fixed; /* Фиксируем заголовок */
top: 0; /* Расположение вверху */
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
z-index: 1000; /* Убедитесь, что заголовок поверх других элементов */
}
section {
margin-top: 60px; /* Отступ для контента под заголовком */
padding: 15px;
height: 2000px; /* Высота для демонстрации прокрутки */
background-color: #f4f4f4;
}
</style>
</head>
<body>
<header>
Мой Фиксированный Заголовок
</header>
<section>
<h2>Содержание страницы</h2>
<p>Прокрутите вниз, чтобы увидеть фиксированный заголовок в действии.</p>
</section>
</body>
</html>
2. Использование position: sticky
Свойство sticky позволяет элементу вести себя как relative до тех пор, пока он не достигнет определённого положения
на странице. Затем он «прилипает» к этому положению.
Пример кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Липкий Заголовок</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
position: sticky; /* Липкий заголовок */
top: 0; /* Расположение вверху при прилипании */
background-color: #444;
color: white;
padding: 10px;
text-align: center;
}
section {
padding: 15px;
height: 2000px; /* Высота для демонстрации прокрутки */
background-color: #efefef;
}
</style>
</head>
<body>
<header>
Мой Липкий Заголовок
</header>
<section>
<h2>Содержание страницы</h2>
<p>Прокрутите вниз, чтобы увидеть лепкий заголовок в действии.</p>
</section>
</body>
</html>
Заключение
Используйте position: fixed, если вы хотите, чтобы ваш заголовок всегда оставался в верхней части окна браузера,
независимо от прокрутки. Используйте position: sticky, если вы хотите, чтобы заголовок был видим до тех пор, пока
пользователь не прокрутит его за пределы видимости.
Эти стили работают во всех современных браузерах, поэтому вы можете уверенно использовать их в своих проектах. Экспериментируйте с ними, чтобы создавать удобные интерфейсы для пользователей.