Headroom для футера

Headroom.js — это лёгкая библиотека для управления видимостью элементов интерфейса при прокрутке страницы. Основное её применение — динамическое скрытие и отображение элементов, чаще всего шапки сайта (header). Однако возможности библиотеки распространяются и на футеры, обеспечивая более гибкое управление нижними панелями страницы.

Подключение библиотеки

Для работы с Headroom.js необходимо подключить сам скрипт и при желании CSS-анимации. Стандартный способ подключения через CDN выглядит следующим образом:

<!-- CSS для плавных переходов -->
<link rel="stylesheet" href="https://unpkg.com/headroom.js@0.12.0/dist/headroom.css">

<!-- Библиотека Headroom.js -->
<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

Футер также должен иметь идентификатор или класс, чтобы библиотека могла привязаться к нужному элементу:

<footer id="site-footer">
    <p>© 2026 Пример компании</p>
</footer>

Инициализация Headroom для футера

В отличие от работы с шапкой, футер обычно располагается внизу страницы и должен скрываться при прокрутке вверх, чтобы не перекрывать контент, и появляться при прокрутке вниз. Для этого создаётся объект Headroom, привязанный к футеру:

const footer = document.getElementById('site-footer');

const headroomFooter = new Headroom(footer, {
    tolerance: {
        up: 5,
        down: 5
    },
    offset: 50,
    classes: {
        initial: 'headroom',
        pinned: 'headroom--pinned',
        unpinned: 'headroom--unpinned',
        top: 'headroom--top',
        notTop: 'headroom--not-top',
        bottom: 'headroom--bottom',
        notBottom: 'headroom--not-bottom'
    }
});

headroomFooter.init();
  • tolerance — определяет минимальное смещение прокрутки для срабатывания скрытия или отображения.
  • offset — расстояние в пикселях, после которого элемент начинает реагировать на прокрутку.
  • classes — CSS-классы для управления состояниями элемента. Важно для футеров особенно выделять состояния bottom и notBottom, чтобы корректно анимировать появление и скрытие.

Особенности работы с футером

  1. Режим прокрутки вверх/вниз Для футера логично использовать инверсную логику: при прокрутке вниз показывать футер, при прокрутке вверх — скрывать. Для этого можно поменять стандартное поведение через CSS-классы:
.headroom--pinned {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.headroom--unpinned {
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}
  1. Корректная работа на страницах с коротким контентом Если страница короче окна браузера, футер может оставаться закреплённым, не скрываясь. Для этого нужно учитывать состояние notBottom и использовать проверку длины документа:
if (document.body.scrollHeight <= window.innerHeight) {
    footer.style.transform = 'translateY(0)';
}
  1. Адаптивность и мобильные устройства На мобильных устройствах рекомендуется увеличить tolerance, чтобы избежать слишком резкого скрытия футера при случайных свайпах:
tolerance: {
    up: 10,
    down: 10
}
  1. Анимации появления и скрытия Headroom.js сам по себе не содержит сложных анимаций, поэтому для футеров часто применяются CSS-переходы с transform или opacity для плавного эффекта.

Расширенные возможности

  • Комбинация с другими библиотеками прокрутки Headroom.js можно сочетать с библиотеками типа ScrollMagic для управления футером в более сложных сценариях анимации.

  • Динамическое изменение класса в зависимости от позиции Используя события Headroom (onPin, onUnpin, onTop, onBottom), можно программно менять вид футера:

headroomFooter.on('onBottom', function() {
    footer.classList.add('footer-visible');
});
headroomFooter.on('onUnpin', function() {
    footer.classList.remove('footer-visible');
});
  • Скрытие футера при просмотре определённых секций Можно отключать футер при достижении определённых блоков страницы, используя метод stop и start:
if (window.scrollY > 1000) {
    headroomFooter.stop();
} else {
    headroomFooter.start();
}

Лучшие практики

  • Всегда задавать высоту футера и использовать transform вместо top или bottom для плавных и GPU-ускоренных анимаций.
  • Минимизировать количество пересчётов при скролле, чтобы не перегружать производительность, особенно на мобильных устройствах.
  • Использовать события Headroom для расширенной логики отображения футера на разных страницах или в зависимости от действий пользователя.
  • Тестировать поведение на коротких и длинных страницах, учитывая адаптивные и мобильные версии.

Пример полной реализации

<footer id="site-footer" class="headroom">
    <p>© 2026 Пример компании</p>
</footer>

<script>
const footer = document.getElementById('site-footer');

const headroomFooter = new Headroom(footer, {
    tolerance: { up: 10, down: 10 },
    offset: 50,
    classes: {
        initial: 'headroom',
        pinned: 'headroom--pinned',
        unpinned: 'headroom--unpinned',
        top: 'headroom--top',
        notTop: 'headroom--not-top',
        bottom: 'headroom--bottom',
        notBottom: 'headroom--not-bottom'
    }
});

headroomFooter.init();

headroomFooter.on('onPin', () => console.log('Футер показан'));
headroomFooter.on('onUnpin', () => console.log('Футер скрыт'));
</script>

Такой подход позволяет сделать футер динамичным, отзывчивым и не загромождать интерфейс пользователя, сохраняя при этом все возможности управления видимостью, которые предоставляет Headroom.js.

Оглавление