Как сделать чтобы меню сайта двигалось вместе с прокруткой

Как показать меню сайта при прокрутке вверх

У каждого веб-сайта есть меню, которое как правило располагается в шапке. Для удобного пользовательского опыта мы должны давать возможность быстро перемещаться по сайту и часто для этого используется меню, прилипающее к верхнему краю экрана. Но что если мы хотим чтобы пользователь не отвлекался на лишние элементы, а меню не занимало ценное на странице место.

Сделаем так, чтобы при скролле вверх наше меню плавно появлялось, а при прокрутке вниз – плавно скрывалось. Можно частично использовать основу из статьи про то, как сделать плавающее меню на Javascript:

/* Сбросим дефолтные отступы */ body < margin: 0; padding: 0; >.header < background: #FFFACD; width: 100%; height: 100px; >.nav < background: #87CEEB; width: 100%; height: 50px; overflow: hidden; display: flex; justify-content: space-around; >.main < background: #AFEEEE; width: 100%; height: 150vh; display: block; >.nav-wr < display: flex; list-style: none; padding: 0; margin: 0; >.nav-item < margin: 0 10px; display: flex; >.nav-link < display: flex; align-items: center; text-decoration: none; >.menu-sticky-hidden < position: fixed; top: 0; height: 0; transition: none; >.menu-sticky-hidden + .main < padding-top: 50px; >.menu-sticky-visible < position: fixed; top: 0; height: 50px; transition: all ease-out 0.2s; >.menu-sticky-visible + .main < padding-top: 50px; >.menu-animation

Сложность задачи заключается в том, чтобы сделать все этапы появления/скрытия меню плавными с помощью css-свойства transition . Получается, что для одного и того же интервала при разном направлении прокрутки нам необходимо задавать разные значения position и стили с определенной специфичностью.

Для этого будем присваивать меню три CSS класса в зависимости от состояния прокрутки в данный момент:

• .menu-animation — будет отвечать за наличие анимации у меню, чтобы меню не дергалось при самом первом скролле, когда мы присваиваем ему значение 0;
• .menu-sticky-hidden — за позиционирование меню и его высоту при прокрутке вниз;
• .menu-sticky-visible — за позиционирование меню и его высоту при прокрутке вверх.

var nav = document.getElementById("nav"); var header = document.getElementById("header"); var headerHeight = header.clientHeight; var lastTopOffset = 0; window.onscroll = function() < var pageOffset = window.pageYOffset; if ( pageOffset >(headerHeight + 70) ) < nav.classList.add("menu-animation"); >else < nav.classList.remove("menu-animation"); >if ( pageOffset > (headerHeight + 50) ) < nav.classList.add("menu-sticky-hidden"); >else < nav.classList.remove("menu-sticky-hidden"); >if (pageOffset < lastTopOffset) < if ( pageOffset >headerHeight ) < nav.classList.add("menu-sticky-visible"); >else < nav.classList.remove("menu-sticky-visible"); >> else < nav.classList.remove("menu-sticky-visible"); >lastTopOffset = pageOffset; >;

Значение 50 — это высота нашего меню, значение 70 — это высота меню + 20 условных пикселей, которые нужны для того, чтобы при резкой прокрутке вниз CSS класс .menu-sticky-hidden успел добавиться в меню раньше .menu-animation и меню не сделало transition от 50 до 0 пикселей своей высоты.

Как создать горизонтальное меню с прокруткой для сайта?

В этой статье мы пошагово рассмотрим как создать горизонтальное меню с прокруткой и добавить к нему несколько улучшений, которые позволят отображать активный элемент по центру и прокручивать меню с помощью удерживания кнопки мыши.

Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.

Создание разметки

Вид горизонтального меню с прокруткой без стилей:

Написание CSS кода меню

1. Зададим стили для .nav-scroller , .nav-scroller__items и .nav-scroller__item :

.nav-scroller { overflow-y: hidden; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .nav-scroller__items { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .nav-scroller__item { color: #424242; display: flex; padding: 0.5rem 1.25rem; text-decoration: none; }

Список используемых свойств:

• overflow-y: hidden — скрываем контент, который будет выходить за нижнюю границу элемента .nav-scroller ;
• background-color: #fff — устанавливаем цвета фона .nav-scroller ;
• box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) — добавляем тень к .nav-scroller ;
• display: flex — делаем элемент flex-контейнером;
• overflow-x: auto — разрешаем прокрутку по горизонтали, она будет доступна при необходимости;
• white-space: nowrap — запрещаем переносить текст на новую строку, даже если он не помещается в ней;

На этом этапе меню будет иметь следующий вид:

2. Добавим правую границу ко всем элементам кроме последнего:

.nav-scroller__item:not(:last-child) { border-right: 1px solid #eee; }

3. Выделим другим цветом фона активный пункт меню:

.nav-scroller__item_active { background-color: #fff59d; }

Указание активного пункта меню будем выполнять посредством добавления к нему класса nav-scroller__item_active .

4. Добавим стили, которые будут изменять фон пункта меню при наведении на него курсора:

/* для всех пунктов кроме активного */ .nav-scroller__item:not(.nav-scroller__item_active):hover { background-color: #f5f5f5; } /* для активного пункта */ .nav-scroller__item_active:hover { background-color: #fff176; }

Вот так довольно просто можно создать меню с горизонтальной прокруткой.

Горизонтальная прокрутка будет появляться только тогда, когда пункты не будут помещаться в контейнер. Перемещение по меню в этом случае будет осуществляться посредством бегунка полосы прокрутки или смахиванием (свайпом влево или вправо) на сенсорных устройствах.

Улучшения для меню с горизонтальной прокруткой

1. Выравнивание активного пункта по центру

Для того чтобы при открытии страницы пункт активного меню отображался по центру можно написать небольшой код на JavaScript:

JavaScript

document.addEventListener('DOMContentLoaded', () => { const $navItems = document.querySelector('.nav-scroller__items'); const $navItemActive = $navItems.querySelector('.nav-scroller__item_active'); if (!$navItemActive) { return; } const navItemsRect = $navItems.getBoundingClientRect(); const navItemActiveRect = $navItemActive.getBoundingClientRect(); const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2; $navItems.scrollLeft = navItemsLeft; });

Этот скрипт после готовности DOM дерева будет автоматически прокручивать меню так, чтобы элемент с классом nav-scroller__item_active оказывался если это возможно по центру.

2. Прокручивания меню с помощью удерживания кнопки мыши

В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).

Для этого в CSS добавим следующий код:

.nav-scroller__items::-webkit-scrollbar { display: none; }

Это правило выключит отображение полосы прокрутки.

После этого на страницу подключим файл dragscroll.js :

Добавим класс dragscroll к прокручиваемому элементу:

Как сделать — меню с горизонтальной прокруткой

Узнайте, как создать горизонтальное прокручиваемое меню с помощью CSS.

Как создать меню с горизонтальной прокруткой

Шаг 1) Добавьте HTML:

Пример

Шаг 2) Добавьте CSS:

Хитрость, позволяющая сделать панель навигации прокручиваемой, заключается в использовании overflow:auto and white-space: nowrap :

Пример

div.scrollmenu <
background-color: #333;
overflow: auto;
white-space: nowrap;
>

div.scrollmenu a display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
>

div.scrollmenu a:hover background-color: #777;
>

Совет: перейдите к нашему руководству по CSS Navbar , чтобы узнать больше о панелях навигации.

Как сделать — Меню с горизонтальной прокруткой

Узнать, как создать горизонтальное прокручиваемое меню с помощью CSS.

Меню с горизонтальной прокруткой

Создать меню с горизонтальной прокруткой

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Трюк, чтобы сделать навигационную панель прокручиваемой с помощью overflow:auto и white-space: nowrap :

Пример

div.scrollmenu <
background-color: #333;
overflow: auto;
white-space: nowrap;
>

div.scrollmenu a display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
>

div.scrollmenu a:hover background-color: #777;
>

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.