Как создать раздел «анимация липкой прокрутки» (прокрутка) в Elementor? Моя настройка CSS + JS не работает ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести «анимацию липкой прокрутки» (также известную как прокрутка/закрепленная прокрутка) на странице WordPress, созданной с помощью Elementor.

Мне нужен тот же эффект, что и на thelot.es, сразу после заголовка «The Lot es ese lugar donde siempre pasa algo»:

Полноэкранный раздел остается фиксированным while multiple tiles fade in/out one by one as the user scrolls through a 400vh container.
I already added custom CSS and custom JS inside Elementor → Page Settings → Advanced, but the animation does not trigger.

None of the elements receive the .active class, and all tiles stay static.

Код: Выделить всё

Section: "Eventos y Servicios 400"
├── Inner Section: "E&S Viewport 100"
│     ├── Heading: Title
│     ├── Heading: Subtitle
│     └── Container: "Eventos y servicios"   ← contains the 4 tiles
│           ├── Tile 1 (class: tile-1 magic-item)
│           ├── Tile 2 (class: tile-2 magic-item)
│           ├── Tile 3 (class: tile-3 magic-item)
│           └── Tile 4 (class: tile-4 magic-item)
└── Widget: HTML (JS not stored here, used only for testing)

Классы, применяемые в Elementor (без точек):

• Раздел: прокрутка
• Внутренний раздел: Sticky-view
• Обертка плиток: Magic-tiles
• Каждая плитка: Magic-item + tile-X

CSS добавлен в Настройки страницы → Дополнительно → Пользовательский CSS

Код: Выделить всё

.scroll-track {
min-height: 400vh;
position: relative;
}

.sticky-view {
position: sticky;
top: 0;
min-height: 100vh;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}

.magic-tiles {
position: relative;
width: 100%;
height: 100%;
}

.magic-item {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.magic-item.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

JavaScript добавлен в «Настройки страницы» → «Дополнительно» → «Пользовательский JS»
(Elementor загружает его автоматически без тегов )

Код: Выделить всё

document.addEventListener('scroll', function () {
const track = document.querySelector('.scroll-track');
if (!track) return;

const tiles = document.querySelectorAll('.magic-item');
if (!tiles.length) return;

const rect = track.getBoundingClientRect();
const trackHeight = track.offsetHeight - window.innerHeight;
if (trackHeight  1) progress = 1;

const sections = tiles.length;
const sectionSize = 1 / sections;

tiles.forEach((tile, index) => {
const start = sectionSize * index;
const end   = sectionSize * (index + 1);
const isActive = progress >= start && progress < end;

tile.classList.toggle('active', isActive);
tile.style.zIndex = (sections - index).toString();
});
});

Ожидаемое поведение

• Элемент .sticky-view должен оставаться зафиксированным во время прокрутки.
• Когда пользователь прокручивает 400vh .scroll-track, только одна плитка должна становиться .active за один раз. время.
• Активная плитка должна исчезнуть/увеличиться, заменяя предыдущую.

Фактическое поведение

• Все плитки остаются видимыми или ведут себя статически.
• Нет Класс .active добавляется или удаляется во время прокрутки.
• Кажется, что JS работает (ошибок консоли нет), но вычисления прокрутки, похоже, не влияют на элементы.

То, что я уже проверял

• Классы в Elementor НЕ включают ведущие точка (например, прокрутка применяется правильно).
• Запускается пользовательский JS (проверено с помощью журналов консоли).
• Все пользовательские CSS правильно загружаются во внешнем интерфейсе.
• К плиткам не применяются эффекты движения Elementor.
• Конфликтов JavaScript не обнаружено.

Вопрос
Что может быть причиной того, что этот раздел Elementor не ведет себя как блок прокрутки с закрепленной прокруткой?

Существуют ли известные ограничения с положением: липкий внутри контейнеров Elementor или разделов Flexbox, которые могли бы предотвратить это Подход JS/CSS не работает?
Я пытаюсь получить эффект от этой веб-страницы: https://www.thelot.es/

только в разделе «The Lot es ese lugar donde siempre pasa algo» (День, Ночь, События)
Любая помощь в отладке вычислений прокрутки или исправлении макета Elementor будет оценена по достоинству.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -elementor