Проверка корректности установки

После установки Headroom.js первым этапом становится проверка корректности подключения файлов. Библиотека может быть подключена несколькими способами:

  • через CDN
  • через пакетный менеджер (npm, yarn)
  • локальным подключением файла

Пример подключения через CDN:

<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>

При использовании сборщиков:

npm install headroom.js
import Headroom from "headroom.js";

Ключевой момент проверки: библиотека должна быть доступна в области видимости.

Для CDN:

console.log(typeof Headroom);

Ожидаемый результат:

function

Если вывод undefined, значит скрипт не подключён или подключён с ошибкой (например, неправильный путь или порядок загрузки).

Проверка наличия DOM-элемента

Headroom работает с конкретным элементом (чаще всего это header). Перед инициализацией важно убедиться, что элемент существует в DOM.

const header = document.querySelector("header");
console.log(header);

Если результат:

null

— элемент не найден. Возможные причины:

  • неверный селектор
  • элемент ещё не загружен (скрипт выполняется раньше DOM)
  • элемент отсутствует в разметке

Решение — отложить выполнение:

document.addEventListener("DOMContentLoaded", function () {
  const header = document.querySelector("header");
  console.log(header);
});

Проверка инициализации Headroom

После получения элемента выполняется создание экземпляра:

const headroom = new Headroom(header);
headroom.init();

Для проверки корректности:

console.log(headroom);

Экземпляр должен содержать свойства:

  • options
  • classes
  • state
  • tolerance
  • offset

Если объект пустой или возникает ошибка — проблема в подключении или передаче аргумента.

Проверка добавления CSS-классов

Headroom управляет состоянием элемента через CSS-классы. После инициализации при прокрутке страницы должны добавляться классы:

  • headroom
  • headroom--pinned
  • headroom--unpinned
  • headroom--top
  • headroom--not-top

Проверка осуществляется через инструменты разработчика (DevTools) или программно:

window.addEventListener("scroll", () => {
  console.log(header.className);
});

При прокрутке вниз должен появляться:

headroom headroom--unpinned

При прокрутке вверх:

headroom headroom--pinned

Если классы не меняются:

  • не вызван init()
  • отсутствует событие прокрутки
  • ошибка в CSS или JS

Проверка работы прокрутки

Headroom реагирует на событие scroll. Проверка его срабатывания:

window.addEventListener("scroll", () => {
  console.log("scroll работает");
});

Если сообщения не появляются:

  • отключён скролл (например, overflow: hidden)
  • используется кастомный контейнер прокрутки

В случае кастомного контейнера необходимо указать его:

const headroom = new Headroom(header, {
  scroller: document.querySelector(".scroll-container")
});

Проверка CSS-стилей

Без CSS визуальный эффект не проявляется, даже если библиотека работает корректно. Минимальный набор стилей:

.headroom {
  transition: transform 0.3s ease;
}

.headroom--pinned {
  transform: translateY(0%);
}

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

Проверка:

  • при прокрутке вверх элемент появляется
  • при прокрутке вниз — скрывается

Если изменений нет:

  • отсутствуют стили
  • CSS переопределяется другими правилами
  • неправильные классы

Проверка параметров конфигурации

Headroom позволяет настраивать поведение. Ошибки в конфигурации могут создавать ощущение неработающей библиотеки.

Пример:

const headroom = new Headroom(header, {
  offset: 100,
  tolerance: 5
});

Проверка:

  • offset — расстояние прокрутки до начала реакции
  • tolerance — чувствительность

Для диагностики можно уменьшить значения:

offset: 0,
tolerance: 0

Это позволит убедиться, что библиотека реагирует мгновенно.

Проверка состояния экземпляра

Headroom хранит текущее состояние:

console.log(headroom.state);

Возможные значения:

  • "pinned"
  • "unpinned"
  • "top"
  • "notTop"

Отсутствие изменений состояния при прокрутке указывает на проблему с событиями или инициализацией.

Проверка конфликтов с другими скриптами

Некоторые библиотеки могут:

  • перехватывать scroll
  • изменять DOM
  • блокировать события

Диагностика:

  1. временно отключить сторонние скрипты
  2. проверить работу Headroom изолированно
  3. использовать минимальный HTML-файл

Проверка порядка загрузки скриптов

Headroom должен подключаться:

  • после DOM-элементов (или с использованием DOMContentLoaded)
  • после зависимостей (если есть)

Неправильный порядок:

<script src="app.js"></script>
<script src="headroom.min.js"></script>

Правильный:

<script src="headroom.min.js"></script>
<script src="app.js"></script>

Проверка в консоли браузера

Ошибки JavaScript напрямую влияют на работу библиотеки. Проверка:

  • открыть DevTools
  • вкладка Console

Типичные ошибки:

  • Headroom is not defined
  • Cannot read property '...' of null
  • синтаксические ошибки

Любая ошибка до инициализации Headroom может остановить выполнение скрипта.

Минимальный тестовый пример

Полностью рабочая проверочная конфигурация:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 2000px;
      margin: 0;
    }

    header {
      position: fixed;
      width: 100%;
      height: 60px;
      background: #333;
      color: white;
    }

    .headroom {
      transition: transform 0.3s ease;
    }

    .headroom--pinned {
      transform: translateY(0%);
    }

    .headroom--unpinned {
      transform: translateY(-100%);
    }
  </style>
</head>
<body>

<header>Header</header>

<script src="https://unpkg.com/headroom.js@0.12.0/dist/headroom.min.js"></script>
<script>
  const header = document.querySelector("header");
  const headroom = new Headroom(header);
  headroom.init();
</script>

</body>
</html>

Если этот пример работает, проблема находится в исходном проекте: конфликты, структура DOM или стили.

Типичные ошибки и их признаки

1. Ничего не происходит

  • не вызван init()
  • нет scroll-событий
  • отсутствуют стили

2. Ошибка в консоли

  • неправильное подключение
  • синтаксическая ошибка в коде

3. Классы добавляются, но визуально нет изменений

  • отсутствует CSS
  • конфликт стилей

4. Работает нестабильно

  • слишком большие значения offset или tolerance
  • кастомный контейнер прокрутки не указан

Инструменты диагностики

  • console.log() для проверки значений
  • DevTools → Elements для отслеживания классов
  • DevTools → Network для проверки загрузки файла
  • DevTools → Console для ошибок

Комплексная проверка всех уровней — подключения, DOM, инициализации, событий и стилей — позволяет точно определить причину некорректной работы Headroom.js.

Оглавление