Горизонтальный скролл

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

Инициализация и базовая настройка для горизонтальной прокрутки

Обычная инициализация Headroom.js для вертикальной прокрутки выглядит так:

var header = document.querySelector("header");
var headroom = new Headroom(header);
headroom.init();

Для горизонтального скролла ключевым моментом является изменение метода, который Headroom использует для отслеживания прокрутки. В стандартной конфигурации Headroom.js проверяет window.scrollY или document.documentElement.scrollTop. Для горизонтальной прокрутки нужно использовать window.scrollX:

var header = document.querySelector("header");

var headroom = new Headroom(header, {
  tolerance: {
    up: 5,
    down: 5
  },
  offset: 50,
  scroller: window,
  onUnpin: function() {
    header.classList.add('hidden');
  },
  onPin: function() {
    header.classList.remove('hidden');
  }
});

// Переопределение функции getScrollY для горизонтальной прокрутки
headroom.getScrollY = function() {
  return window.scrollX;
};

headroom.init();

В этом примере tolerance определяет порог в пикселях, при котором будет срабатывать скрытие или появление панели, а offset задает минимальное смещение перед началом реакции. Метод getScrollY переопределяется для возврата горизонтального значения прокрутки, что превращает Headroom в инструмент для управления навигацией по оси X.

Использование CSS для анимации при горизонтальной прокрутке

Ключевым моментом является корректная анимация скрытия и появления навигации. Для горизонтального скролла можно применять свойства transform: translateX вместо стандартного translateY:

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background-color: #333;
  color: white;
  transition: transform 0.3s ease-in-out;
}

header.headroom--unpinned {
  transform: translateX(-100%);
}

header.headroom--pinned {
  transform: translateX(0);
}

При таком подходе панель плавно уходит влево при прокрутке вправо и возвращается обратно при движении скролла влево.

Продвинутые настройки и оптимизация

1. Динамическая скорость скрытия: Можно изменять скорость скрытия в зависимости от величины прокрутки:

headroom.onUn pin = function() {
  var speed = Math.min(window.scrollX / 50, 1);
  header.style.transitionDuration = (0.3 * speed) + 's';
  header.classList.add('hidden');
};

2. Адаптивное поведение для разных устройств: На мобильных устройствах горизонтальный скролл встречается реже, поэтому можно включать Headroom только на десктопной версии:

if (window.innerWidth > 1024) {
  headroom.init();
}

3. Интеграция с горизонтальными каруселями: Headroom можно использовать совместно с горизонтальными слайдерами и галереями, чтобы панель навигации скрывалась при пролистывании контента:

var slider = document.querySelector('.carousel');
slider.addEventListener('scroll', function() {
  headroom.update();
});

Управление событиями и кастомизация классов

Headroom.js поддерживает следующие события: onPin, onUnpin, onTop, onNotTop. Для горизонтальной прокрутки их поведение можно адаптировать через переопределение метода getScrollY или getScrollDirection.

headroom.getScrollDirection = function() {
  var currentX = window.scrollX;
  var direction = currentX > this.lastScroll ? "down" : "up";
  this.lastScroll = currentX;
  return direction;
};

Эта настройка позволяет применять различные CSS-классы в зависимости от направления горизонтального скролла и создавать более интерактивную навигацию.

Рекомендации по производительности

  • Ограничивать количество обновлений headroom.update() при горизонтальном скролле через requestAnimationFrame.
  • Минимизировать тяжелые CSS-трансформации и использовать transform: translateX вместо left или margin.
  • Кэшировать элементы DOM, чтобы не выполнять поиск через querySelector при каждом событии скролла.

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

Оглавление