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

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

Определение разрешения экрана

Для реализации условной активации сначала необходимо определить текущую ширину окна браузера. Самым распространённым способом является использование свойства window.innerWidth:

const screenWidth = window.innerWidth;

Для динамического отслеживания изменений ширины удобно подключить обработчик события resize:

window.addEventListener('resize', () => {
    const updatedWidth = window.innerWidth;
    // логика условной активации
});

Инициализация Headroom.js с условием

Библиотека Headroom.js инициализируется через объект Headroom, которому передаётся DOM-элемент шапки сайта и опции:

const header = document.querySelector('header');
const headroomOptions = {
    tolerance: {
        up: 10,
        down: 20
    },
    offset: 50,
    classes: {
        initial: "headroom",
        pinned: "headroom--pinned",
        unpinned: "headroom--unpinned"
    }
};

Чтобы активировать Headroom.js только на экранах шире определённого значения, применяют условную проверку:

let headroomInstance;

function initHeadroom() {
    const minWidth = 1024; // минимальная ширина для активации
    const currentWidth = window.innerWidth;

    if (currentWidth >= minWidth && !headroomInstance) {
        headroomInstance = new Headroom(header, headroomOptions);
        headroomInstance.init();
    } else if (currentWidth < minWidth && headroomInstance) {
        headroomInstance.destroy();
        headroomInstance = null;
    }
}

initHeadroom();
window.addEventListener('resize', initHeadroom);

Ключевые моменты:

  • Переменная headroomInstance хранит текущее состояние Headroom для возможности последующего уничтожения.
  • Проверка !headroomInstance предотвращает повторную инициализацию при каждом событии resize.
  • Метод destroy() корректно снимает все привязки событий и возвращает элемент в исходное состояние.

Использование медиазапросов через JavaScript

Помимо прямой проверки ширины окна, можно применять медиазапросы:

const mediaQuery = window.matchMedia('(min-width: 1024px)');

function handleMediaChange(e) {
    if (e.matches) {
        headroomInstance = new Headroom(header, headroomOptions);
        headroomInstance.init();
    } else if (headroomInstance) {
        headroomInstance.destroy();
        headroomInstance = null;
    }
}

mediaQuery.addListener(handleMediaChange);
handleMediaChange(mediaQuery);

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

Настройка отдельных параметров для разных разрешений

Иногда требуется, чтобы на мобильных устройствах шапка не исчезала или скрывалась медленнее. Для этого параметры tolerance и offset можно определять в зависимости от ширины:

function getHeadroomOptions(width) {
    if (width >= 1024) {
        return {
            tolerance: { up: 10, down: 20 },
            offset: 50,
            classes: {
                initial: "headroom",
                pinned: "headroom--pinned",
                unpinned: "headroom--unpinned"
            }
        };
    } else {
        return {
            tolerance: { up: 5, down: 5 },
            offset: 0,
            classes: {
                initial: "headroom",
                pinned: "headroom--pinned",
                unpinned: "headroom--unpinned"
            }
        };
    }
}

function initHeadroomDynamic() {
    const width = window.innerWidth;

    if (!headroomInstance) {
        headroomInstance = new Headroom(header, getHeadroomOptions(width));
        headroomInstance.init();
    } else {
        headroomInstance.destroy();
        headroomInstance = new Headroom(header, getHeadroomOptions(width));
        headroomInstance.init();
    }
}

window.addEventListener('resize', initHeadroomDynamic);
initHeadroomDynamic();

Управление производительностью

При условной активации важно минимизировать нагрузку при событии resize, так как оно срабатывает очень часто. Для этого применяют дебаунсинг:

let resizeTimeout;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(initHeadroomDynamic, 150);
});

Данный приём предотвращает многократную инициализацию Headroom в течение короткого времени и повышает отзывчивость страницы.

Практические рекомендации

  • Для простого сайта достаточно проверки window.innerWidth.
  • Для сложных интерфейсов с несколькими точками перелома удобнее использовать window.matchMedia.
  • Всегда хранить экземпляр Headroom в переменной, чтобы корректно вызывать destroy().
  • Подстраивать параметры tolerance и offset под разные разрешения для улучшения UX.
  • Использовать дебаунсинг при обработке resize, чтобы избежать лишних вычислений.

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

Оглавление