Как поменять активный класс при скролле?

Question

[420873535]

Всем привет.

Суть проблемы
Есть неограниченное количество контейнеров на странице, например

<section class="Scrn Scrn_1 active">Lorem</section>
<section class="Scrn Scrn_2">Ipsum</section>
<section class="Scrn Scrn_3">Dolor</section>
<section class="Scrn Scrn_4">Sit</section>
<section class="Scrn Scrn_5">Amet</section>

Первый блок с классом "active" position: relative;, остальные position: fixed;. Когда первый блок полностью скрывается - у следующего за ним должен добавиться класс "active", чтоб его тоже можно было прокрутить.

Подскажите пожалуйста как реализовать?

Answer 1

[RAX7]

Возьми какой-нибудь плагин для jQuery, типа такого https://www.jqueryscript.net/layout/jQuery-Plugin-...
или пили свой велосипед, например так:

Comments

[420873535]

Ваш пример почти то, что нужно, только при начале скролла смена классов моментально пробегает по всем блокам. Т.е. получается виден первый и последний блоки.
Не пойму, как там отключить анимацию и получить обычный скролл у блока с классом "active"..

[RAX7]

420873535, сильно быстро наверное скролл крутите =) Попробуйте затротилить скролл.

[420873535]

Странная штука, эффект, когда виден первый и последний блоки, наблюдается при скролле на тачпаде. Если обычной мышкой с колесом, то нормально переключает.
А в принципе там отключить анимацию и получить обычный скролл у блока с классом "active" можно или придётся весь скрипт переписать?

[RAX7]

420873535, там нет поддержки тачпада. Это просто пример, как можно сделать. Либо писать и тестировать всё самому, чтобы не было вот таких странных штук, либо взять готовое.
fullPage.js
Scrollify

[420873535]

RAX7, спасибо!