0

на сайте идут секции друг под другом К примеру как на картинке( их больше 3 )

введите сюда описание изображения

Пользователь скроллит, доходит до начало 1 секции И когда секция полностью заходит в экран( т.е верхний угол секции находится на верху экрана) добавляется класс к примеру active ( для самой секции ) И так по аналогии со 2 секции

Я предоставляю себе реализацию таким образом. Проходимся по всем секциями и записываем их координаты. А когда пользователь скроллит добавляем проверку если к примеру scroll > элемента из массива , секции с данным индексом добавить класс. Правда саму реализации в коде не предоставляю. Спасибо заранее

3 ответа 3

0

Получилось сделать примерно так, только вопрос, не будет ли это слишком нагружено ?

useEffect(() => {
    window.addEventListener('scroll', function (event){
      setScroll(window.scrollY > bannerPosition);
      if (window.scrollY < positions[0]) return;
      const index = positions.findIndex((el, i, arr) => window.scrollY < arr[i + 1]);

      const categoryAttribute = "[data-id=" + "'" + index + "'" + "]";
      const element = document.querySelector(categoryAttribute)

      const allElements = document.querySelectorAll('.menu-nav li span')
      for(let el of allElements){
        el.classList.remove('active')
      }

      if(element) element.classList.add('active')
      if(index === -1 && window.scrollY > positions[0]){
        allElements[allElements.length - 1].classList.add('active')
      }
    })

  },[bannerPosition, positions])
1
  • Не проще вместо "[data-id=" + "'" + index + "'" + "]" использовать `[data-id="${index}"]`, читается намного легче. 18 фев 2021 в 14:55
0

Чтобы не было сильно загружено, нужно перенести это в кастомный хук.

const useКастомныйХук = (если нужны параметры через запятую, deps) => {
  useEffect(() => {
    содержимое useEffect
  }, [...deps]);
  //если нужно можно что-нибудь вернуть
  return {
    ...
  };
};

export default useКастомныйХук;

//Теперь этот хук можно использовать в компоненте так:

const SomeComponent = (props) => {

  useКастомныйХук(
    параметры, если нужно через запятую,
    [bannerPosition, positions]
  );

  return (
    ...
  );
};
0

Вы можете наблюдать за элементом при помощи технологии. IntersectionObserver
Они очень быстрые, так как работают внутри DOM.

Если выражаться простым языком, своего рода это событие, которое выполняется, если искомый элемент в зоне поражения.

Вы можете сами указать угол обзора и учитывать отступы или нет, так же изначально он ищет в body, вы можете менять и это. Изучите технологию пожалуйста!

2
  • @ Уже пробовал с помощью него, но эффект не тот который мне требовался.. Он к примеру отображался сразу когда был виден( а у меня чуть другое условие ) или его можно настроить каким то образом?
    – Dan
    18 фев 2021 в 7:22
  • Он принимает допустим threshold. Настраивать его по разному можно, тут уже ваше желание. Он был для таких целей и создан, правда поддержка не сильная у него.
    – WalkMess
    18 фев 2021 в 7:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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