Как сделать - Уменьшение меню при прокрутке
Узнать, как изменить размер панели навигации при прокрутке с помощью CSS и JavaScript.
Как уменьшить навигационную панель при прокрутке
Шаг 1) Добавить HTML:
Создание панели навигации:
Пример
<div id="navbar">
<a href="#default" id="logo">CompanyLogo</a>
<div id="navbar-right">
<a class="active" href="#home">Главная</a>
<a href="#contact">Контакт</a>
<a href="#about">О Нас</a>
</div>
</div>
Шаг 2) Добавить CSS:
Стиль панели навигации:
Пример
/* Создание липкой/фиксированной навигационной панели */
#navbar {
overflow: hidden;
background-color: #f1f1f1;
padding: 90px 10px; /* Большой отступ, который будет сжиматься при прокрутке (с помощью JS) */
transition: 0.4s; /* Добавить эффект перехода при уменьшении заполнения*/
position: fixed; /* Липкая/фиксированная навигационная панель */
width: 100%;
top: 0; /* На вершине */
z-index: 99;
}
/* Стиль ссылок навигационной панели */
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Стиль логотипа */
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
/* Ссылки на мышь-над */
#navbar a:hover {
background-color: #ddd;
color: black;
}
/* Стиль активной/текущей ссылки */
#navbar a.active {
background-color: dodgerblue;
color: white;
}
/* Отображение некоторых ссылок справа */
#navbar-right {
float: right;
}
/* Добавить отзывчивость - на экранах шириной менее 580 пикселей навигационная панель отображается вертикально, а не горизонтально */
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px !important; /* Использовать !important убедиться, что JavaScript не переопределяет заполнение на небольших экранах */
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}
}
Шаг 3) Добавить JavaScript:
Пример
// Когда пользователь прокручивает вниз 80px от верхней части документа, измените размер заполнения навигационной панели и размер шрифта логотипа
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("navbar").style.padding = "80px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
Редактор кода »
