Kevin Powell - CommunityKP-C
Kevin Powell - Community•4y ago•
90 replies
Myndi

Intersection observer firing

I have this code:
const navbar = document.querySelector(".navbar");
const products = document.querySelector("#Products");

const productsOptions = {
    rootMargin: "-300px",
};

const productsObserver = new IntersectionObserver(function(entries){
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            navbar.classList.add("navbar-dark");
        }
        else {
            navbar.classList.remove("navbar-dark");
        }
    });
}, productsOptions);

productsObserver.observe(products);


For the following webpage: https://myntsu.github.io/e-commerce-sample/landing-page/

It targets the navbar. Is there anyway to make it fire once it reaches #Products and stays like that going downwards? And to keep the class removal when going back.

Currently it removes it when entering and leaving that section, with a margin of -300px (both up and down).

I tried many options, but no luck.
Was this page helpful?