Tengo el siguiente codigo html, css y javascript para poder cambiar el color del div del navegador cuando hago scroll, pero no funciona.
HTML:
<div class="top-bar">
<div class="fixed-content top-bar-content" id="fixed-content-top-bar-content">
<a class="main-page-link" href="/">
<img class="logo" src="logos/petinder_white.svg" alt="Petinder"/></a>
<nav class="navbar">
<ul class="nav">
<li><a href="#">Servicios</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</nav>
CSS:
.top-bar-content {
display: flex;
align-items: center;
height: 100%;
background-color: transparent;
}
.top-bar-content.active {
background-color: white;
}
Javascript:
const navbar = document.querySelector("#fixed-content-top-bar-content");
window.addEventListener("scroll", function (e) {
const lastPosition = window.scrollY;
if (lastPosition > 50) {
navbar.classList.add("active");
} else if (navbar.classList.contains("active")) {
navbar.classList.remove("active");
} else {
navbar.classList.remove("active");
}
});
El id:"fixed-content-top-bar-content" es el div que da color al navegador. Pero al realizar la comprobación con el script, no funciona.
Alguna ayuda?