const hamburger = document.querySelector( ".header .nav-bar .nav-list .hamburger" ); const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul"); const menu_item = document.querySelectorAll( ".header .nav-bar .nav-list ul li a" ); const header = document.querySelector(".header .container"); document.addEventListener("scroll", () => { var scroll_position = window.scrollY; if (scroll_position > 250) { header.style.backgroundColor = "#29323c"; } else { header.style.backgroundColor = "transparent"; } });

 <section id="header"> <div class="header container"> <div class="nav-bar"> <div class="brand"> <a href="#hero"> <h1>ELITE.</h1> </a> </div> <div class="nav-list"> <div class="hamburger"><div class="bar"></div></div> <ul> <li><a href="#hero" data-after="Home">Home</a></li> <li><a href="#services" data-after="Services">Services</a></li> <li><a href="#projects" data-after="Projects">Projects</a></li> <li><a href="#about" data-after="Our CEO">Our CEO</a></li> <li><a href="#contact" data-after="Contact Us">Contact Us</a></li> </ul> </div> </div> </div> </section>

Cuando me desplazo más allá de 250, el color de fondo no cambia de transparente al color esperado en el código JS. ¿Cómo puedo hacer que MY JS responda en el navegador?