Подсветка пункта меню именно в тот момент, когда до него проскролили

Question

Подскажите, пожалуйста, как мне сделать так, чтобы активный (выбранный пункт меню) подсвечивался непосредственно при выполнении определенного условия (когда проскролились до нужного элемента). Условие я задам потом сама, на данный момент функция срабатывает при клике на пункт меню, но не реагирует на условие. То есть работает сама перемотка и изменение цвета, а нужно, чтобы это происходило строго с учетом условия. Спасибо.

const scrollToTarget = (e) => {

    const targetId = e.target.getAttribute('to');
    const target = document.getElementById(targetId);
    const targetPosition = getPosition(target);
    const offsetTargetPosition = targetPosition - navigationHeight;
    window.scrollTo({
      top: offsetTargetPosition,
      behavior: 'smooth'
    });
    const elem = e.target;
    if (elem.getBoundingClientRect().y === 47) {
      elem.setAttribute('style', 'color: green');
    } else elem.setAttribute('style', 'color: blue');
  };

  for (let i = 0; i < navLinks.length; i++) {
    navLinks[i].addEventListener('click', scrollToTarget);
  }

Answer 1

ладно.. рискну предложить теоретически рабочий вариант

const scrollToTarget = e => {
    const targetId = e.target.getAttribute('to');
    const target = document.getElementById(targetId);
    const targetPosition = getPosition(target);
    const offsetTargetPosition = targetPosition - navigationHeight;
    const elem = e.target;

    window.addEventListener('scroll', customScrollTo); // после запуска scrollToTarget мы вешаем прослушивание на событие scroll

    window.scrollTo({
      top: offsetTargetPosition,
      behavior: 'smooth'
    });

    // эта функция будет проверять когда скролл дойдет до элемента каждую прокрутку станицы
    function customScrollTo() {
        if (window.pageYOffset === offsetTargetPosition) {  // если скролл дошел до элемента 
            window.removeEventListener('scroll', customScrollTo); // удаляем прослушивание

            elem.style.color = elem.getBoundingClientRect().y === 47 ? 'green' : 'blue';  // и меняем цвет
        }
    }
};

for (let i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener('click', scrollToTarget);
}

БЛОГ НА HUSL

Подсветка пункта меню именно в тот момент, когда до него проскролили

Ответы (1 шт):