Как сделать - Липкий заголовок при прокрутке
Узнать, как создать фиксированный/липкий заголовок на прокрутке с помощью CSS и JavaScript.
Создать фиксированный заголовок при прокрутке
Шаг 1) Добавить HTML:
Пример
<div class="header" id="myHeader">
<h2>Мой заголовок</h2>
</div>
Шаг 2) Добавить CSS:
Пример
/* Стиль заголовка */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
/* Содержимое страницы */
.content {
padding: 16px;
}
/* Класс "sticky" добавляется в заголовок с помощью JS, когда он достигает своей прокрутки позиция */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Добавить некоторые верхние отступы к содержимому страницы для предотвращения внезапного быстрого перемещения (поскольку заголовок получает новую позицию в верхней части страницы (позиция: фиксированная и верхняя: 0 */
.sticky + .content {
padding-top: 102px;
}
Шаг 3) Добавить JavaScript:
Пример
// Когда пользователь прокручивает страницу, выполните myFunction
window.onscroll = function() {myFunction()};
// Получить заголовок
var header = document.getElementById("myHeader");
// Получить смещение позиции навигационной панели
var sticky = header.offsetTop;
// Добавить класс "sticky" к заголовку, когда вы достигнете его позиции прокрутке.
// Удалить "sticky" при выходе из положения прокрутки
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
Редактор кода »
