Как выполнить функцию один раз при скролле до опредленного блока
Есть лэндинг, при скролле до определенного блока мы меняем hash, НО функция срабатывает при скроле и хэш меняется даже прис скроле в один пиксель ВОПРОС: Как сделать так, чтобы это происходило лишь один раз?
let navLinks = document.querySelectorAll(".nav__link");
const addActiveClass = () => {
let fromTop = window.scrollY + 280;
navLinks.forEach(navLink => {
let section = document.querySelector(navLink.hash);
if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
navLink.classList.add("nav__link--active");
if (history.replaceState) {
history.pushState(null, null, navLink.hash);
} else {
location.hash = navLink.hash;
}
} else {
navLink.classList.remove("nav__link--active");
}
});
}
Ответы (1 шт):
Автор решения: mego4iter
→ Ссылка
- За приделами функции addActiveClass хранить предыдущее значение
- каждый раз при вычислении сверять с предыдущим и если изменилось то добавлять в history и менять классы