90 replies

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);

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

#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.

KP-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);

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

#Products

Intersection observer firing

Similar Threads

Intersection observer firing

Similar Threads

Similar Threads

Similar Threads