Tailwind CSS intersection observer for sticky navigation bar

stickyIO.js

const banner = document.querySelector("#banner");
const nav = document.querySelector("#navigation");

// Create a new IntersectionObserver object
let observer = new IntersectionObserver(function (entries, observer) {
    for (let entry of entries) {
        if (entry.isIntersecting) {
            nav.classList.remove("bg-stone-200");
            nav.classList.add("bg-stone-100");
        } else {
            nav.classList.add("bg-stone-200");
            nav.classList.remove("bg-stone-100");
        }
    }
});

// Observe each heading
observer.observe(banner);