afterResponsive

Метод afterResponsive в библиотеке fullPage.js является одним из ключевых хуков, позволяющих управлять поведением страницы при адаптивной настройке. Он вызывается после того, как fullPage.js изменил состояние страницы в зависимости от заданного порога responsive. Этот хук особенно важен для динамического управления элементами на странице, когда активируется или деактивируется адаптивный режим.

Синтаксис и подключение

new fullpage('#fullpage', {
    responsiveWidth: 900,
    afterResponsive: function(isResponsive){
        console.log("Адаптивный режим активирован:", isResponsive);
    }
});

  • responsiveWidth — ширина экрана, ниже которой fullPage.js перестаёт работать в стандартном режиме с вертикальными секциями и свайпами.

  • afterResponsive — функция, вызываемая каждый раз после того, как fullPage.js проверяет текущее состояние экрана.

  • isResponsive — булевое значение:

    • true — адаптивный режим активирован (fullPage.js выключен, секции ведут себя как обычные блоки страницы).
    • false — адаптивный режим отключен, fullPage.js работает в стандартном режиме.

Практическое использование

1. Изменение поведения элементов

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

afterResponsive: function(isResponsive){
    if(isResponsive){
        document.querySelectorAll('.fp-section').forEach(section => {
            section.style.minHeight = 'auto';
        });
    } else {
        document.querySelectorAll('.fp-section').forEach(section => {
            section.style.minHeight = window.innerHeight + 'px';
        });
    }
}

В этом примере для каждой секции отключается фиксированная высота при адаптивной ширине, что предотвращает скролл внутри секций и делает страницу более удобной для мобильных устройств.

2. Управление навигацией и интерфейсом

Адаптивный режим позволяет динамически скрывать или отображать элементы интерфейса:

afterResponsive: function(isResponsive){
    const menu = document.getElementById('main-menu');
    if(isResponsive){
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
}

Это удобно для скрытия сложных навигационных элементов на маленьких экранах.

3. Активация или деактивация плагинов и скриптов

Хук afterResponsive может использоваться для условной инициализации сторонних скриптов:

afterResponsive: function(isResponsive){
    if(isResponsive){
        if(window.sliderInstance){
            window.sliderInstance.destroy();
        }
    } else {
        if(!window.sliderInstance){
            window.sliderInstance = new Swiper('.slider', { loop: true });
        }
    }
}

Такой подход предотвращает конфликты между fullPage.js и другими JS-библиотеками на адаптивных устройствах.

Отличие afterResponsive от других хуков

  • afterLoad — срабатывает при полной загрузке секции.
  • onLeave — срабатывает при выходе из секции.
  • afterResponsive — строго реагирует на изменение состояния адаптивного режима, а не на навигацию между секциями.

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

Советы по применению

  1. Использовать для динамического изменения CSS и структуры DOM при переходе в адаптивный режим.
  2. Минимизировать тяжелые операции внутри хука, так как он может срабатывать при каждом изменении размера окна.
  3. Комбинировать с responsiveWidth и responsiveHeight, чтобы точно контролировать порог срабатывания адаптивного режима.

Примеры сложной конфигурации

new fullpage('#fullpage', {
    responsiveWidth: 1024,
    responsiveHeight: 600,
    afterResponsive: function(isResponsive){
        const footer = document.querySelector('footer');
        if(isResponsive){
            footer.classList.add('mobile-footer');
            document.body.classList.add('responsive-mode');
        } else {
            footer.classList.remove('mobile-footer');
            document.body.classList.remove('responsive-mode');
        }
    },
    anchors: ['home','about','services','contact'],
    navigation: true
});

В этом примере fullPage.js автоматически управляет стилями футера и добавляет класс к body, облегчая применение адаптивной верстки через CSS.

afterResponsive обеспечивает тонкий контроль над поведением fullPage.js при переходе в адаптивный режим и позволяет комбинировать управление стилями, скриптами и элементами интерфейса, делая страницы полностью адаптивными и интерактивными.

Оглавление