Привет
window.onload = () => {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
const activeId = entry.target.id,
activeImg = document.querySelector(`.upgrade-about__img[data-upgradeAbout="${activeId}"]`),
activeLink = document.querySelector(`.upgrade-about__nav-link[href="#${activeId}"]`);
if (entry.isIntersecting) {
activeImg.classList.add('show');
upgradeAboutNav.classList.add('show');
activeLink.classList.add('active');
} else {
activeImg.classList.remove('show');
activeLink.classList.remove('active');
}
});
}, {threshold: .3});
upgradeAboutContent.forEach(el => observer.observe(el));
Есть скрипт, который отслеживает пересечение целевого html элемента. При пересечении каждого целевого элемента (а именно, когда в области просмотра он появляется на 30 проц.) другим элементам (activeImg и activeLink) добавляются классы css, а при переходе за границу каждого целевого элемента они соответственно удаляются. Скрипт отрабатывает отлично, но есть один вопрос: а как можно сделать так, чтобы именно при пересечении каждого нового целевого объекта со старого удалялся класс. Т.е. сейчас, допустим, если в область видимости попадает первый элемент и 30 процентов второго, то classList.add добавляется в оба элемента. Как первый элемент исчезает из области видимости, класс, конечно, удаляется, но как можно отследить пересечение следующего элемента, чтобы у предыдущего удалить класс именно в момент пересечения следующего за ним элемента?
Т.е. вошли в область видимости первого, прошли его, как только вошли в область видимости второго элемента, с первого удалили класс, не важно остался в области видимости он или нет.
Кто-то сталкивался с подобным?
