0

столкнулся с такой проблемой, надо сделать функционал как на яндекс еде. введите сюда описание изображения

Т.е мы скроллим и когда секция попадает в область видимости то пункту меню добавляется класс.

Мои попытки Я пробовал сделать данный функционал через react-intersection-observer Но проблема в том что когда к примеру в экран попадают 2 секции он не может корректно работать, показывает неправильные секции Так же были проблемы когда идет скролл наверх

Для меня идеальным условием было бы, что бы ТОЛЬКО тогда когда границы секции начинают задевать край верхнего экрана, только тогда надо добавлять класс Active. НО как именно сделать данное условие

P.S НА старом проекте что был на WP я уже делал такой функционал, пробегался по всему сайту и писал в массиве координаты всех секции и потом сравнивал с текущими координатами. Но тут 2 проблемы

  1. На текущем сайте данные рендеряться постепенно
  2. Такой подход мне кажется очень нагруженным ибо на каждом px скролле происходит события высчитывания

1 ответ 1

1

Используйте библиотеку react-visibility-sensor

Пример использования

Что касается того, чтобы делать элемент видимым только когда он доскролился до вершины экрана, то это решается параметром offset: { top: 0}. Возможно я ошибаюсь, читайте документацию!)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.