Автоматическое скрытие навигации при скролле на CSS и jQuery

Автоматическое скрытие навигации стало довольно популярным приемом в последнее время, в частности, на мобильных устройствах. Идея довольно простая, но эффективная: по умолчанию навигация будет находиться в верху страницы, затем при прокрутке страницы, автоматически скрываем её, чтобы предоставить больше пространства для основного контента. Если пользователь прокручивает вверх, мы интерпретируем такое поведение как желание получить доступ к навигации, и снова отображаем её в верху страницы.

Сложность

Создание HTML структуры меню

HTML структура содержит элемент header.cd-auto-hide-header в качестве оболочки навигации (nav.cd-primary-nav) и main.cd-main-content для основного контента.

<header class="cd-auto-hide-header">
    <div class="logo"><a href="#0"><img src="/img/cd-logo.svg" alt="Logo"></a></div>
 
    <nav class="cd-primary-nav">
        <a href="#cd-navigation" class="nav-trigger">
            <span>
                <em aria-hidden="true"></em>
                Menu
            </span>
        </a> <!-- .nav-trigger -->
 
        <ul id="cd-navigation">
            <li><a href="#0">The team</a></li>
            <li><a href="#0">Our Services</a></li>
            <li><a href="#0">Our Projects</a></li>
            <li><a href="#0">Contact Us</a></li>
        </ul>
    </nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
 
<main class="cd-main-content">
    <!-- content here -->
</main> <!-- .cd-main-content -->

Если страница имеет подменю, то понадобится элемент nav.cd-secondary-nav внутри шапки сайта:

<header class="cd-auto-hide-header">
    <div class="logo"><a href="#0"><img src="/img/cd-logo.svg" alt="Logo"></a></div>
 
    <nav class="cd-primary-nav">
        <a href="#cd-navigation" class="nav-trigger">
            <span>
                <em aria-hidden="true"></em>
                Menu
            </span>
        </a> <!-- .nav-trigger -->
 
        <ul id="cd-navigation">
            <!-- links here -->
        </ul>
    </nav> <!-- .cd-primary-nav -->
 
    <nav class="cd-secondary-nav">
        <ul>
            <li><a href="#0">Intro</a></li>
            <!-- additional links here -->
        </ul>
    </nav> <!-- .cd-secondary-nav -->
</header> <!-- .cd-auto-hide-header -->
 
<main class="cd-main-content sub-nav">
    <!-- content here -->
</main> <!-- .cd-main-content -->

Наконец, если на сайте присутствует вторичная навигационная панель, под основной навигацией, добавляем элемент .cd-hero под элементом header, за которым следует элемент .cd-secondary-nav:

<header class="cd-auto-hide-header">
    <div class="logo"><a href="#0"><img src="/img/cd-logo.svg" alt="Logo"></a></div>
 
    <nav class="cd-primary-nav">
        <a href="#cd-navigation" class="nav-trigger">
            <span>
                <em aria-hidden="true"></em>
                Menu
            </span>
        </a> <!-- .nav-trigger -->
 
        <ul id="cd-navigation">
            <!-- links here -->
        </ul>
    </nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
 
<section class="cd-hero">
    <!-- content here -->
</section> <!-- .cd-hero -->
 
<nav class="cd-secondary-nav">
    <ul>
        <!-- links here -->
    </ul>
</nav> <!-- .cd-secondary-nav -->
 
<main class="cd-main-content sub-nav-hero">
    <!-- content here -->
</main> <!-- .cd-main-content -->

Добавление стилей

Мы используем класс .cd-auto-hide-header для определения основных стилей автоматического скрытия меню. По умолчанию, шапка имеет фиксированное положение (top:0), когда пользователь начнет перемещаться вниз, используем класс .is-hidden для скрытия навигации.

.cd-auto-hide-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  transition: transform .5s;
}
.cd-auto-hide-header.is-hidden {
  transform: translateY(-100%);
}

Стили для вторичной навигации:

.cd-secondary-nav.fixed {
  position: fixed;
  top: 60px;
}
.cd-secondary-nav.slide-up {
  transform: translateY(-60px);
}

Обработчики событий

Мы используем jQuery для определения события прокрутки.

var scrolling = false;
$(window).on('scroll', function(){
    if( !scrolling ) {
        scrolling = true;
        (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);
    }
});

Функция autoHideHeader() отвечает ща скрытие/отображение навигации в зависимости от направления прокрутки.

ДЕМО1 ДЕМО2 ДЕМО2 СКАЧАТЬ Перевод статьи Auto-Hiding Navigation

Тэги: menu

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.