Избегайте Intersection Observer, чтобы наблюдать за двумя целями одновременно

У меня есть несколько разделов и несколько навигационных ссылок на моей странице. Я использую Intersection Observer, чтобы добавить класс active к соответствующей ссылке, которая перенаправляет в этот раздел. В какой-то части моей страницы видны 2 раздела. Я хочу добавить класс active в самый видимый раздел (только один раз за раз), но я не знаю, как это сделать:

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

Вот код Intersection Observer:

    const sectObserver = new IntersectionObserver(entries => {
    for (entry of entries) {
      // here i get the section id and the link classList:
      const { id } = entry.target,
      { classList } = document.querySelector(`#to-${id}`);
      if (entry.intersectionRatio) {
        classList.add('active');
      } else {
        classList.remove('active');
      };
    };
  });

А вот экземпляр наблюдателя целей:

    document.querySelectorAll('section:not(#get-cv, #skills)')
      .forEach(link => sectObserver.observe(link));

javascript html intersection-observer
person gianlop3z    schedule 16.05.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Intersection Observer имеет параметр threshold, который определяет, как большая часть раздела (от 0 до 1) должна быть видна до того, как она запустит вашу функцию. Попытайтесь получить этот процент правильно для разделов на вашей странице.

const options = { threshold: 0.5 };
const sectObserver = new IntersectionObserver(entries => {
  for (entry of entries) {
    // here i get the section id and the link classList:
    const { id } = entry.target,
    { classList } = document.querySelector(`#to-${id}`);
    if (entry.intersectionRatio) {
      classList.add('active');
    } else {
      classList.remove('active');
    };
  };
}, options);
person sbgib    schedule 16.05.2021