Как сделать - Панель навигации липкой/прикрепить
Узнать, как создать липкую навигационную панель с помощью CSS и JavaScript.
Как создать липкую навигационную панель
Шаг 1) Добавить HTML:
Создание панели навигации:
Пример
<div id="navbar">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
</div>
Шаг 2) Добавить CSS:
Стиль панели навигации:
Пример
/* Стиль навигационной панели */
#navbar {
overflow: hidden;
background-color: #333;
}
/* Ссылки навигационной панели */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Содержимое страницы */
.content {
padding: 16px;
}
/* Класс sticky добавляется в навигационную панель с помощью JS, когда он достигает своей позиции прокрутки */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Добавить некоторые верхние отступы к содержимому страницы для предотвращения внезапного быстрого перемещения (поскольку панель навигации получает новое положение в верхней части страницы (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
Шаг 3) Добавить JavaScript:
Пример
// Когда пользователь прокручивает страницу, выполните myFunction
window.onscroll = function() {myFunction()};
// Получить навигатор
var navbar = document.getElementById("navbar");
// Получить смещение позиции навигационной панели
var sticky = navbar.offsetTop;
// Добавить класс sticky к навигационной панели, когда вы достигнете ее положения прокрутки. Удалите "sticky", когда вы покидаете положение прокрутки
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Редактор кода »