Make Header transparent when scroll

PHPMaker General Discussion (PHPMaker)
1

I have made my header Fixed Layout as we scroll down the header stay at the top.

Trying to make the header transparent when we scroll the page.

I have put this code insde the style

.main-header {
    background-color: #37517e !important; /* solid on top */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1030;
}

/* When scrolled, make transparent */
.main-header.scrolled {
    background-color: rgba(55, 81, 126, 0.9) !important; /* 90% opacity */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

To insert the scrolled in the header I use the javascript under the Client Scripts->Global->Pages with Header/Footer->Startup Script

function setupScrollHeaderWatcher(retry = 0) {
    const header = document.querySelector(".main-header");

    if (!header) {
        if (retry > 20) {
            console.log("🚫 .main-header not found after 2 seconds.");
            return;
        }
        // Retry every 100ms
        setTimeout(() => setupScrollHeaderWatcher(retry + 1), 100);
        return;
    }

    console.log("✅ .main-header found. Scroll watcher attached.");

    window.addEventListener("scroll", function () {
        if (window.scrollY > 10) {
            header.classList.add("scrolled");
        } else {
            header.classList.remove("scrolled");
        }
    });
}

// Wait for DOM and try attaching
document.addEventListener("DOMContentLoaded", () => {
    setupScrollHeaderWatcher();
});

Unable to add scrolled class when i scroll the mouse.