Узнать, как создать скрытие меню навигации при прокрутке вниз используя HTML, CSS и JavaScript.
Скрыть навигацию при прокрутке
Создать скрытие навигации при прокрутке
Шаг 1) Добавить HTML:
Create a navigation bar:
<div id="navbar">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
</div>
Шаг 2) Добавить CSS:
Стиль панели навигации:
#navbar {
background-color: #333; /* Черный цвет фона */
position: fixed; /* Сделайте его липким/фиксированным */
top: 0; /* Оставайтесь на вершине */
width: 100%; /* Полная ширина */
transition: top 0.3s; /* Эффект перехода при скольжении вниз (и вверх) */
}
/* Стиль ссылок навигационной панели */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
Шаг 3) Добавить JavaScript:
/* Когда пользователь прокручивает вниз, скрыть навигационную панель. Когда пользователь прокручивает вверх, показать навигационную панель */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
Попробуйте сами »