Как реализовать пролистывание блока при прокрутке с учётом скролла страницы?

Question

[Legion123212]

Не могу найти как называется такой эффект, но попробую объяснить.
Есть страница со статичными блоками, где-то в середине страницы есть блок, который надо анимировать.
У этого блока внутри есть слайдер с таймлайном-прогрессом пролистывания слайдера. То есть суть в том, чтобы был скролл до этого блока, потом проходило пролистывание слайдера в этом блоке (соответственно сам блок должен оставаться в поле видимости пока слайдер не закончится), а потом снова пролистывание всей страницы.


Я не знаю с какой стороны уже подступиться и как делать такой эффект. Я пробовал вешать position: sticky на блок и определять высоту родительского блока. Но это работает при медленном скролле, при быстром блок пролетает не успевая закончить слайдер. Так же высота может быть разной, т.к. кол-во слайдов в слайдере может быть разной, т.к. блок на разных страницах используется.

Другие идеи кажутся дичью, а каких-то плагинов я на эту тему не нашёл, даже на codepen, возможно не так искал т.к. не знаю название такого эффекта.

У кого есть опыт как это делается и в какую сторону мне смотреть. Готовое решение мне не нужно, только информация куда двигаться

Answer 1

[Михаил Р.]

Я не знаю с какой стороны уже подступиться и как делать такой эффект. Я пробовал вешать position: sticky на блок и определять высоту родительского блока. Но это работает при медленном скролле, при быстром блок пролетает не успевая закончить слайдер.

JS, если грубо описать последовательность действий, то:
- Получаем контейнер со скроллом.
- Создаем переменную со значением скролла контейнера.
- Слушаем скролл контейнера, при изменение скролла - пишем значение в переменную.
- Каждому элементу контейнера, которому необходимо "двигаться" при изменения скролла контейнера - прокидываем callback, который будет выполняться, если переменная со значением скролла контейнера изменилась.
- Callback отправляет каждый элемент с "движением" из этого контейнера, который уже самостоятельно определяет, как он будет реагировать на каждое изменение переменной.

Если Вы не готовы тратить время на велосипедо-строение и его поддержку, то лучше использовать чужое велосипедо-строение:
https://greensock.com/scrolltrigger
https://locomotivemtl.github.io/locomotive-scroll/

Comments

[Legion123212]

Просто нечто, спасибо большое

[Михаил Р.]

Legion123212, не за что, но здесь принято высказывать благодарность соответствующей кнопкой под ответом, ну и если ответ помог - отметьте решением

Answer 2

[My1Name]

как называется такой эффект

Если я правильно понял описание, то этот эффект называется Scrollspy. По крайней мере, что-то похожее есть на Bootstrap.