Получение информации о состоянии

Библиотека fullPage.js предоставляет удобные методы для получения информации о текущем состоянии страницы с вертикальной и горизонтальной прокруткой. Это позволяет динамически управлять поведением интерфейса, реагировать на события и интегрировать дополнительные функции на основе позиции пользователя на сайте.

Активный раздел и слайд

Для работы с текущим положением используются методы:

  • fullpage_api.getActiveSection() — возвращает объект текущего активного раздела. Этот объект содержит:

    • index — числовой индекс раздела (начиная с 0).
    • anchor — строковый идентификатор раздела, если он задан в параметре anchors.
    • item — DOM-элемент раздела.
    • isFirst и isLast — логические значения, указывающие на первый или последний раздел.

  • fullpage_api.getActiveSlide() — возвращает объект активного слайда внутри раздела. Структура объекта:

    • index — индекс слайда.
    • anchor — якорь слайда, если он указан.
    • item — DOM-элемент слайда.
    • isFirst и isLast — логические флаги позиции слайда.

Пример использования:

const activeSection = fullpage_api.getActiveSection();
console.log(activeSection.index, activeSection.anchor);

const activeSlide = fullpage_api.getActiveSlide();
if(activeSlide) {
    console.log(activeSlide.index, activeSlide.anchor);
}

Индексы и якоря

Для получения числовых индексов или якорей:

  • fullpage_api.getSectionIndex() — возвращает индекс указанного раздела.
  • fullpage_api.getSlideIndex() — возвращает индекс слайда внутри текущего раздела.

Если необходимо получить якорь активного элемента, используется:

const sectionAnchor = fullpage_api.getActiveSection().anchor;
const slideAnchor = fullpage_api.getActiveSlide()?.anchor;

Значение anchor полезно при навигации по URL (#section1) или для динамического изменения состояния меню.

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

Для условий на основе положения страницы:

  • fullpage_api.getActiveSection().isFirst — возвращает true, если текущий раздел первый.
  • fullpage_api.getActiveSection().isLast — возвращает true, если текущий раздел последний.
  • fullpage_api.getActiveSlide()?.isFirst и isLast — аналогично для слайдов.

Пример проверки:

if(fullpage_api.getActiveSection().isLast) {
    console.log('Пользователь достиг последнего раздела');
}

const activeSlide = fullpage_api.getActiveSlide();
if(activeSlide && activeSlide.isFirst) {
    console.log('Первый слайд текущего раздела');
}

Получение количества разделов и слайдов

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

  • fullpage_api.getTotalSections() — возвращает число всех разделов.
  • fullpage_api.getSlidesCount(sectionIndex) — возвращает количество слайдов в указанном разделе.

Пример:

console.log(`Всего разделов: ${fullpage_api.getTotalSections()}`);
console.log(`Слайдов в первом разделе: ${fullpage_api.getSlidesCount(0)}`);

Проверка текущего положения с помощью координат

FullPage.js хранит внутренние координаты прокрутки, доступные через объект состояния:

  • fullpage_api.getScrollY() — текущая вертикальная позиция в пикселях.
  • fullpage_api.getScrollX() — горизонтальная позиция, актуальна при слайдах с горизонтальной прокруткой.
  • fullpage_api.getActiveSection().offsetTop — смещение активного раздела относительно начала страницы.
  • fullpage_api.getActiveSlide()?.offsetLeft — смещение активного слайда относительно начала раздела.

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

Состояние навигации и меню

Для работы с навигацией и якорями:

  • fullpage_api.getActiveSection().anchor и fullpage_api.getActiveSlide()?.anchor — ключевые для обновления активного пункта меню.
  • fullpage_api.getMenu().querySelector('.active') — позволяет получить текущий элемент меню, если задано меню через параметр menu.

Пример синхронизации меню с активным разделом:

const menuItems = document.querySelectorAll('#myMenu li a');
menuItems.forEach(item => item.classList.remove('active'));

const activeAnchor = fullpage_api.getActiveSection().anchor;
document.querySelector(`#myMenu li a[href="#${activeAnchor}"]`).classList.add('active');

Методы для проверки анимаций и прокрутки

  • fullpage_api.isMoving — возвращает true, если сейчас выполняется прокрутка между разделами.
  • fullpage_api.isScrollAllowed — проверяет, разрешена ли прокрутка (вертикальная или горизонтальная).
  • fullpage_api.canScrollSection(sectionIndex) — проверяет возможность прокрутки к указанному разделу.

Пример:

if(!fullpage_api.isMoving) {
    fullpage_api.moveSectionDown();
}

Интеграция с событиями

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

  • onLeave(origin, destination, direction) — срабатывает при уходе из раздела.
  • afterLoad(origin, destination, direction) — срабатывает после загрузки нового раздела.
  • afterSlideLoad(section, origin, destination, direction) — после загрузки слайда.

Пример:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log(`Переход с ${origin.index} на ${destination.index}`);
    },
    afterLoad: function(origin, destination, direction){
        console.log(`Активный раздел: ${destination.index}`);
    }
});

Вывод состояния в реальном времени

Для динамического интерфейса удобно объединять методы получения активного раздела, слайда и индексов. Например:

function logState() {
    const section = fullpage_api.getActiveSection();
    const slide = fullpage_api.getActiveSlide();

    console.log(`Раздел: ${section.index} (${section.anchor}), Слайд: ${slide ? slide.index : 'нет'}`);
}

setInterval(logState, 1000);

Это позволяет отслеживать состояние страницы и интегрировать сложные анимации, навигационные подсказки и другие элементы интерфейса в реальном времени.

Оглавление