Tengo una barra de navegación con un fondo de tipo degradado (ligeramente negro, a transparente).

Quería que la barra de navegación se volviera completamente negra al desplazarme, y escribí el código JavaScript necesario, pero el color cambia solo cuando elimino el degradado de color de fondo del CSS; de lo contrario, no funciona. ¿Existe alguna solucion para esto?

Código HTML:

 <section id="header" class="headerr"> <a href="#"><img src="images/logo.png" class="logo"></a> <div> <ul id="navbar"> <li><a class="active" href="why.html">Why Snap Smile</a></li> <li><a href="solutions.html">Solutions</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="about.html">About</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href=""><i class="fa-solid fa-headset fa-2x"></i></a></li> </ul> </div>

Código CSS:

 body { font-family: 'Montserrat', sans-serif; width: 100%; margin: 0; background-color: #121212; } /* Header Section */ #header { display: flex; align-items: center; justify-content: space-between; padding: 10px 80px; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.6629026610644257) 0%, rgba(9,9,121,0) 57%); z-index: 999; position: sticky; top: 0; left: 0; } .headerr__black{ background-color: #121212; } #navbar { display: flex; align-items: center; justify-content: space-between; } #navbar li { list-style: none; padding: 0 20px; position: relative; } #navbar li a { text-decoration: none; font-size: 1rem; font-weight: 600; color: #ffffff; transition: 200ms ease-in-out; } #navbar li a:hover, #navbar li a.active { color: #e50914; } #navbar li a.active::after, #navbar li a:hover::after { content: ""; width: 30%; height: 3px; background: #e50914; position: absolute; bottom: -6px; left: 20px; } .logo { width: 10rem; }

Código JavaScript:

 const nav=document.getElementById('header'); window.addEventListener('scroll',function(){ if(window.scrollY >= 100){ nav.classList.add('headerr__black'); } else{ nav.classList.remove('headerr__black'); } });