Активация пунктов меню при скролле

Библиотека ScrollMagic предназначена для управления анимациями и элементами страницы в зависимости от позиции скролла. Одной из частых задач является активация пунктов меню при достижении соответствующих секций на странице. Для реализации этого создаются сцены (Scene) и контроллер (Controller), которые отслеживают положение прокрутки и меняют состояние элементов интерфейса.

Создание контроллера

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

// Инициализация контроллера
var controller = new ScrollMagic.Controller();

Контроллер может быть стандартным или расширенным, с поддержкой горизонтального скролла или кастомных опций. Основная роль – связывать сцены с прокруткой страницы.

Определение сцен для каждой секции

Каждая секция страницы должна иметь сцену, которая активирует соответствующий пункт меню при попадании секции в зону видимости. Основные параметры сцены:

  • triggerElement – элемент, при достижении которого срабатывает сцена.
  • duration – длина сцены, определяющая диапазон прокрутки, в котором элемент активен.
  • triggerHook – точка на экране, где срабатывает триггер (значения от 0 до 1; 0 — верх страницы, 1 — низ страницы, 0.5 — центр).

Пример создания сцены:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "100%", 
    triggerHook: 0.25
})
.setClassToggle("#menu-item-1", "active") // добавляет класс "active" к пункту меню
.addTo(controller); // привязывает сцену к контроллеру

Механизм активации класса

Метод setClassToggle(element, className) позволяет автоматически добавлять и удалять CSS-класс при активации сцены. Это ключевой способ реализовать подсветку пунктов меню без необходимости писать сложные обработчики скролла вручную.

Преимущества такого подхода:

  • Автоматическая активация при прокрутке.
  • Гибкая настройка длительности и положения триггера.
  • Возможность управлять несколькими пунктами меню одновременно.

Настройка триггеров для всех секций

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

var sections = document.querySelectorAll("section");
var menuItems = document.querySelectorAll("#menu li");

sections.forEach(function(section, index){
    new ScrollMagic.Scene({
        triggerElement: section,
        duration: section.offsetHeight,
        triggerHook: 0.3
    })
    .setClassToggle(menuItems[index], "active")
    .addTo(controller);
});

В этом примере каждая секция получает свою сцену, а пункт меню подсвечивается при попадании секции в область видимости, определяемую triggerHook.

Продвинутая синхронизация

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

new ScrollMagic.Scene({
    triggerElement: "#section2",
    offset: 50, // отступ сверху для срабатывания сцены
    duration: "80%", // активность сцены на 80% высоты секции
    triggerHook: 0.2
})
.setClassToggle("#menu-item-2", "active")
.addTo(controller);

offset позволяет смещать начало активации сцены относительно верхнего края триггерного элемента, а duration задаёт диапазон, в котором пункт меню остаётся активным.

Интеграция с плавной прокруткой

Если используется библиотека для плавного скролла (например, GSAP или нативный scroll-behavior), необходимо учитывать, что ScrollMagic отслеживает фактическое положение скролла. В таких случаях рекомендуется:

  • Передавать кастомный scrollContainer в контроллер:
var controller = new ScrollMagic.Controller({
    container: "#scroll-container"
});
  • Использовать синхронизацию с анимациями через .on("progress", callback) или .on("enter leave", callback) для динамического управления классами меню.

Дополнительные возможности

  • Поддержка обратного скролла: класс автоматически удаляется при уходе за предел сцены.
  • Совмещение с анимациями: к сценам можно привязать анимации через GSAP с .setTween().
  • Множественные контроллеры: для отдельных блоков с внутренней прокруткой можно создавать отдельные контроллеры.

Итоговый шаблон структуры

  1. Создать контроллер.
  2. Определить секции и соответствующие элементы меню.
  3. Создать сцены для каждой секции с triggerElement, duration, triggerHook.
  4. Использовать setClassToggle для управления состоянием меню.
  5. При необходимости использовать offset для точной настройки активации.
  6. Добавлять сцены в контроллер.

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

Оглавление