JavaScript and CSS: How to make a fixed navigation menu transparent when scrolling?

I’ve been researching how to make the navigation bar transparent but I can’t find which mistakes I’ve done. Currently the menu does not change at all could anyone please give me an example of the code I would need to use in order to make it transparent whenever I scroll down.

I am trying to create a fixed navigation menu that will become transparent when the user scrolls down the page. I used the following code:

I expected the menu to gradually become transparent as the user scrolls down, but it remains the original color. Also I tested my code in different browsers to ensure consistent behavior.
I’ve tried adding the following CSS:

.menu {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(45deg, #f00,#00f);
    padding: 10px 0;
    margin-bottom: 40px;
}
.menu .transparent {
    background: linear-gradient(
        45deg,
        rgba(255,0,0,0.8),
        rgba(0,0,255,0.8)
    );
}

Together, this means that the following styles will only apply to elements within the menu when the transparent class is added to them

and here it is on JavaScript:

document.addEventListener('DOMContentLoaded', function () {
    const menu = document.querySelector('.menu');

    function toggleMenuTransparency() {
        if (window.scrollY > 0) {
           menu.classList.add('tranparent')
        }
        else {
            menu.classList.remove('transparent');
        }
    }
    window.addEventListener('scroll', toggleMenuTransparency);
});