Подсветка активного раздела

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

Инициализация ScrollMagic

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

var controller = new ScrollMagic.Controller();

Контроллер управляет всеми сценами на странице и обеспечивает синхронизацию анимаций с прокруткой.

Создание сцены для секции

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

var sections = document.querySelectorAll("section");
var navLinks = document.querySelectorAll("nav a");

sections.forEach(function(section, index) {
    new ScrollMagic.Scene({
        triggerElement: section,
        triggerHook: 0.5, // Событие срабатывает, когда секция достигает середины экрана
        duration: section.offsetHeight // Можно использовать для плавного изменения состояния
    })
    .on("enter", function () {
        navLinks.forEach(link => link.classList.remove("active"));
        navLinks[index].classList.add("active");
    })
    .addTo(controller);
});

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

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

Плавное переключение активного пункта

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

new ScrollMagic.Scene({
    triggerElement: section,
    triggerHook: 0,
    duration: section.offsetHeight
})
.setClassToggle(navLinks[index], "active")
.addTo(controller);

Метод setClassToggle автоматически добавляет и убирает класс при входе и выходе из сцены, упрощая управление активным состоянием.

Поддержка адаптивной навигации

Если меню фиксированное или изменяет размеры при скролле, рекомендуется обновлять сцены при изменении размеров окна:

window.addEventListener("resize", function() {
    controller.update(true);
});

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

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

Чтобы подсветка работала корректно с плавной прокруткой через ссылки навигации:

navLinks.forEach(link => {
    link.addEventListener("click", function(e) {
        e.preventDefault();
        var target = document.querySelector(this.getAttribute("href"));
        window.scrollTo({
            top: target.offsetTop,
            beh * avior: "smooth"
        });
    });
});

Плавная прокрутка не конфликтует с ScrollMagic, если использовать triggerHook и duration правильно, обеспечивая синхронное обновление классов навигации.

Отслеживание нескольких состояний

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

Начало секции — добавление класса активного пункта.
Конец секции — удаление класса или смена на следующий пункт.
Дополнительные анимации — включение параллакс-эффектов или других визуальных переходов.

Пример использования нескольких событий:

new ScrollMagic.Scene({
    triggerElement: section,
    triggerHook: 0.2
})
.on("enter", () => navLinks[index].classList.add("highlight"))
.on("leave", () => navLinks[index].classList.remove("highlight"))
.addTo(controller);