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 that you have read and understand our privacy policy and code of conduct.

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