Учебник Headroom.js

Введение
- Что такое Headroom.js
- История создания и развития библиотеки
- Основные возможности и преимущества
- Когда стоит использовать Headroom.js
- Альтернативные решения и сравнение
Установка и подключение
- Установка через npm
- Установка через yarn
- Подключение через CDN
- Загрузка и использование локальных файлов
- Проверка корректности установки
Базовая инициализация
- Минимальный код для запуска
- Инициализация через JavaScript
- Инициализация через jQuery
- Работа с селекторами элементов
- Множественная инициализация на странице
Конфигурация и параметры
- Параметр offset
- Параметр tolerance
- Параметр classes
- Параметр scroller
- Параметр onPin
- Параметр onUnpin
- Параметр onTop
- Параметр onNotTop
- Параметр onBottom
- Параметр onNotBottom
Классы состояний
- Структура классов по умолчанию
- Класс headroom
- Класс headroom--pinned
- Класс headroom--unpinned
- Класс headroom--top
- Класс headroom--not-top
- Класс headroom--bottom
- Класс headroom--not-bottom
- Переопределение стандартных классов
Стилизация с помощью CSS
- Базовые стили для шапки
- Анимация появления и скрытия
- Использование transitions
- Применение transform для производительности
- Фиксированное позиционирование
- Z-index и наложение слоев
- Адаптивные стили для мобильных устройств
Продвинутая конфигурация
- Настройка чувствительности скролла
- Работа с различными направлениями прокрутки
- Offset для разных точек срабатывания
- Tolerance для верхней и нижней прокрутки
- Кастомный scroller для модальных окон
- Дебаунсинг и троттлинг событий
Методы API
- Метод init
- Метод destroy
- Метод pin
- Метод unpin
- Метод freeze
- Метод unfreeze
- Цепочки вызовов методов
События и коллбэки
- Структура коллбэк-функций
- Получение состояния элемента в коллбэках
- onPin для действий при появлении
- onUnpin для действий при скрытии
- onTop для верхней позиции страницы
- onNotTop для ухода с верхней позиции
- onBottom для нижней позиции страницы
- onNotBottom для ухода с нижней позиции
- Комбинирование нескольких коллбэков
Работа с пользовательским скроллом
- Использование параметра scroller
- Скролл внутри контейнера
- Множественные области прокрутки
- Горизонтальный скролл
- Виртуальный скролл
Интеграция с фреймворками
- Использование в React
- Использование в Vue.js
- Использование в Angular
- Работа с серверным рендерингом
- Динамическое создание и удаление экземпляров
Оптимизация производительности
- Влияние на FPS при скролле
- Оптимизация перерисовок
- Использование will-change в CSS
- Минимизация reflow и repaint
- Throttle и debounce для событий
- Профилирование производительности
Адаптивность и мобильные устройства
- Особенности работы на touch-устройствах
- Различия в поведении iOS и Android
- Обработка инерционного скролла
- Viewport и масштабирование
- Оптимизация для слабых устройств
Доступность
- ARIA-атрибуты для навигации
- Keyboard navigation
- Screen readers совместимость
- Focus management
- Skip links и headroom
Расширенные паттерны использования
- Headroom для боковой панели
- Множественные элементы с разными настройками
- Синхронизация нескольких headroom-элементов
- Условная активация в зависимости от разрешения
- Динамическое изменение конфигурации
Комбинирование с другими библиотеками
- Работа с библиотеками плавной прокрутки
- Интеграция с Intersection Observer API
- Использование вместе с sticky positioning
- Совместимость с parallax-библиотеками
- Headroom и infinite scroll
Отладка и устранение проблем
- Типичные ошибки инициализации
- Проблемы с z-index
- Конфликты с другими скриптами
- Дебаггинг событий скролла
- Проверка применения классов
- Использование DevTools для диагностики
Кроссбраузерность
- Поддержка современных браузеров
- Работа в Internet Explorer
- Полифиллы для старых браузеров
- Тестирование в разных окружениях
- Graceful degradation
Безопасность
- XSS-уязвимости при работе с DOM
- Безопасная работа с пользовательским контентом
- Content Security Policy
- Проверка входных параметров
Миграция и обновление
- Обновление с версии 0.9.x на 0.10.x
- Breaking changes между версиями
- Обратная совместимость
Расширение функциональности
- Создание собственных плагинов
- Форк и модификация исходного кода
- Добавление кастомных событий
- Интеграция с системами сборки
Тестирование
- Unit-тестирование headroom-компонентов
- E2E тестирование поведения
- Тестирование производительности
- CI/CD для headroom-проектов
Практические примеры
- Классическая скрывающаяся шапка
- Шапка с изменением стиля при скролле
- Компактная версия навигации
- Sticky header с headroom
- Анимированное меню
- Headroom для футера
- Комбинация с гамбургер-меню
Производственное использование
- Минификация и сжатие
- Ленивая загрузка библиотеки
- Критический CSS для headroom
- Метрики производительности
Справочные материалы
- Полный список параметров конфигурации
- Полный список методов API
- Полный список событий и коллбэков
- Полный список CSS-классов
- Спецификация browser support