De acuerdo, estoy jugando con algunas ideas de diseño y parece que no puedo hacer que JavaScript haga lo que quiero. Quiero un TopNav transparente, que cuando el usuario se desplace para decir 48px o donde yo considere, el fondo de TopNav se vuelve negro. Ejemplo crudo a continuación de lo que quiero que suceda, pero cuando me desplazo, TopNav permanece transparente. He probado un par de soluciones de otras respuestas aquí hasta el punto de copiar/pegar y simplemente editar los nombres de los elementos para que coincidan con mi html. Simplemente no estoy seguro de lo que estoy haciendo mal:

CSS

 body { font-family: Futura, Arial, Trebuchet MS, sans-serif; } header { margin: 0; } .stickyNav { position:fixed; top:0; left: 0; width: 100%; height: 48px; } .topNav { max-width: 1366px; display: flex; justify-content: space-between; margin: 0 auto; background-color: black; color: #D4D4D4; height: 48px; } .scroll { background-color:#000000; } .navigationMenu{ display: inline-flex; list-style: none; }

 var myNav = document.getElementById("TopNav"); window.onscroll = function() { "use strict"; if (document.body.scrollTop >= 1 || document.documentElement.scrollTop >= 1) { myNav.classList.add("scroll"); } else { myNav.classList.remove("scroll"); } };

 <header > <div class="stickyNav" > <nav class="topNav" id="TopNav"> <h3>LOGO HERE</h3> <ul class="navigationMenu"> <li class="navigationItem">Home</li> <li class="navigationItem">Services</li> <li class="navigationItem">About</li> <li class="navigationItem">Contact</li> </ul> </nav> </div> </header>