Форк и модификация исходного кода

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

Структура исходного кода

Исходный код Headroom.js организован следующим образом:

  1. Core module – основной модуль, отвечающий за:

    • Детекцию направления скролла.
    • Сравнение текущей позиции с предыдущей.
    • Добавление и удаление CSS-классов для управления видимостью шапки.

  2. CSS-классы – по умолчанию библиотека использует:

    • headroom – базовый класс элемента.
    • headroom--pinned – элемент закреплён на экране.
    • headroom--unpinned – элемент скрыт.
    • headroom--top и headroom--not-top – дополнительные состояния для верхней позиции страницы.

  3. Настройки конфигурации включают:

    • tolerance – порог для срабатывания событий.
    • offset – смещение при котором начинает работать логика скрытия.
    • classes – объект с настраиваемыми CSS-классами.

Форк библиотеки

Форк библиотеки предполагает копирование исходного репозитория и создание собственного проекта с возможностью внесения изменений. Для этого необходимо:

  1. Клонировать репозиторий:
git clone https://github.com/WickyNilliams/headroom.js.git
cd headroom.js
  1. Создать новую ветку для модификаций:
git checkout -b custom-headroom
  1. Обновить package.json при необходимости, чтобы адаптировать зависимости под собственный проект или изменить версию.

Модификация логики скролла

Основной метод обработки скролла находится в классе Headroom:

Headroom.prototype.update = function () {
    var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    var toleranceExceeded = Math.abs(currentScroll - this.lastScrollY) >= this.tolerance;

    if (!toleranceExceeded) return;

    if (currentScroll > this.lastScrollY && currentScroll > this.offset) {
        this.unpin();
    } else if (currentScroll < this.lastScrollY) {
        this.pin();
    }

    this.lastScrollY = currentScroll;
};

Возможные модификации:

  1. Изменение чувствительности:

    • Параметр tolerance можно увеличивать, чтобы шапка реже скрывалась, либо уменьшать для более чувствительного реагирования.

  2. Изменение смещения:

    • offset задаёт позицию, после которой появляется логика скрытия. Можно задать разный offset для мобильной и десктопной версии.

  3. Кастомные события:

    • Добавление собственных коллбеков при событиях pin и unpin позволяет интегрировать анимацию или трекинг:
Headroom.prototype.pin = function () {
    this.elem.classList.add(this.classes.pinned);
    this.elem.classList.remove(this.classes.unpinned);
    this.onPin && this.onPin();
};

Headroom.prototype.unpin = function () {
    this.elem.classList.add(this.classes.unpinned);
    this.elem.classList.remove(this.classes.pinned);
    this.onUnpin && this.onUnpin();
};

Подключение и сборка

  1. Сборка через npm:
npm install
npm run build

Результат будет находиться в папке dist, где доступны версии headroom.js и headroom.min.js.

  1. Интеграция в проект:
import Headroom from './dist/headroom.js';

var myElement = document.querySelector('header');
var headroom = new Headroom(myElement, {
    tolerance: 10,
    offset: 50,
    onPin: function() { console.log('Pinned'); },
    onUnpin: function() { console.log('Unpinned'); }
});
headroom.init();

Расширение функционала

Для создания уникального поведения можно:

  1. Добавить новые состояния:

    • Например, headroom--scrolled-half для изменения стиля после достижения 50% высоты страницы.

  2. Изменять CSS-анимации через JS:

    • Управлять transition-duration или добавлять transform при изменении классов.

  3. Комбинировать с другими библиотеками:

    • Использовать Intersection Observer для более точного контроля появления шапки при скролле конкретных секций.

Тестирование и отладка

  • Проверять работу через инструменты разработчика, отслеживая добавление и удаление классов.
  • Использовать console.log или debugger внутри методов pin, unpin и update.
  • Проводить тестирование на разных устройствах, учитывая разную высоту окна и скорость скролла.

Сборка кастомной версии

После внесения изменений можно:

  1. Обновить версию в package.json.
  2. Создать минифицированную версию через npm run build.
  3. Опубликовать форк на GitHub или через npm для повторного использования.

Форк и модификация Headroom.js дают полную свободу контроля над поведением шапки страницы, позволяя адаптировать библиотеку под любые требования интерфейса и анимации.

Оглавление