Question

我是一名JavaScript新秀，并且尝试与交集观察者打交道。在我的项目中，我想观察多个目标：在链接上应用“活动”类的部分，以及用于制作gsap动画的特定类（或稍后简单地更改类）。

我设法使某些东西起作用，但是它又重复又丑陋，我想有一个干净的起点。

这是我的工作和重复代码：

const changeNav = (entries, observer) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            document.querySelector('.active').classList.remove('active');
            var id = entry.target.getAttribute('id');
            var main = document.querySelector('main');
            main.querySelector(`[href="#${id}"]`).classList.add('active');
        }
    });
};

const options = {
    threshold: 0.55,
};

let observer = new IntersectionObserver(changeNav, options);

const sections = document.querySelectorAll('section');
sections.forEach((section) => {
    observer.observe(section);
});

//Repeating Code :

const parallax = (entries, observer2) => {
    entries.forEach((entry) => {
        // verify the element is intersecting
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            let tl2 = gsap.timeline({ repeat: 0, repeatDelay: 1 });
            tl2.to('.animgsap', {
                duration: 5,
                opacity: 1,
                y: 0,
                stagger: 0.2,
            });
        }
    });
};

let observer2 = new IntersectionObserver(parallax, options);

const gsapEl = document.querySelectorAll('.gsap');
gsapEl.forEach((element) => {
    observer2.observe(element);
});

我试图像这样将所有内容归为一个观察者，但遇到了问题（无法读取null的属性“ classList”）

const changeNav = (entries, observer) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            document.querySelector('.active').classList.remove('active');
            var id = entry.target.getAttribute('id');
            var main = document.querySelector('main');
            main.querySelector(`[href="#${id}"]`).classList.add('active');

            let tl2 = gsap.timeline({ repeat: 0, repeatDelay: 1 });
            tl2.to('.animgsap', {
                duration: 5,
                opacity: 1,
                y: 0,
                stagger: 0.2,
            });
        }
    });
};


const options = {
    threshold: 0.55,
};

let observer = new IntersectionObserver(changeNav, options);

const sections = document.querySelectorAll('section');
sections.forEach((section) => {
    observer.observe(section);
});

const gsapEl = document.querySelectorAll('.gsap');
gsapEl.forEach((element) => {
    observer.observe(element);
});

有人可以帮我清理这个烂摊子吗？我没有添加html和CSS，但是如果您确实需要具体情况，我会添加。

提前感谢您并确保自己在家里的安全！

交叉路口观察员：观察多个目标

0 个答案: