Добрый день, столкнулся с такой проблемой, надо сделать функционал как на яндекс еде.
Т.е мы скроллим и когда секция попадает в область видимости то пункту меню добавляется класс.
Мои попытки
Я пробовал сделать данный функционал через
react-intersection-observer
Но проблема в том что когда к примеру в экран попадают 2 секции он не может корректно работать, показывает неправильные секции
Так же были проблемы когда идет скролл наверх
Для меня идеальным условием было бы, что бы ТОЛЬКО тогда когда границы секции начинают задевать край верхнего экрана, только тогда надо добавлять класс Active.
НО как именно сделать данное условие
P.S НА старом проекте что был на WP я уже делал такой функционал, пробегался по всему сайту и писал в массиве координаты всех секции и потом сравнивал с текущими координатами. Но тут 2 проблемы
1) На текущем сайте данные рендеряться постепенно
2) Такой подход мне кажется очень нагруженным ибо на каждом px скролле происходит события высчитывания
