0

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?

4
  • 'No funciona' es un poco vago... ¿Qué es lo que no funciona? ¿Revisaste que el valor del scroll esté en el rango que buscas? (Si no se añade la clase puede que nunca esté por encima de 50). ¿La clase 'active' se añade al div? PD: el else if y el else en tu eventListener hacen lo mismo, no es necesaria la redundancia el 23 oct. 2021 a las 14:46
  • Perdon, solo queria decir que no acaba funcionando y no entiendo el porque
    – Joan
    el 23 oct. 2021 a las 15:51
  • No lo tomes a mal no era un regaño, solo quería decir que para poder ayudarte a solucionar el problema hace falta saber el comportamiento que resulta del código que tienes el 23 oct. 2021 a las 17:02
  • Voy un poco perdido, como lo harias tu?
    – Joan
    el 23 oct. 2021 a las 17:24

1 respuesta 1

0

¿El scroll lo estas haciendo sobre toda la pagina o solo sobre la lista? Te dejo un ejemplo con customización de la barra del scroll con CSS, los colores están con nombres para que puedas entender a que hace referencia cada pseudo estilo.

Se crea el pseudo estilo "navbarhover::-webkit-scrollbar-thumb" será la clase que alternara según la condición de la posición del scroll, si es mayor a 50 entonces queda negro y si es menor, entonces rojo.

Usé Jquery puesto que es más sencillo de interpretar. También extendí tu lista para y cambie un poco el estilo para forzar la vista a generar un scroll.

Creo que con este ejemplo tendrás lo suficiente para jugar y entender su funcionamiento.

Suerte!!

const navbar = $("#navbar");

navbar.on("scroll", function (e) {
  var lastPosition = $(this).scrollTop();
  console.log(lastPosition);
  if (lastPosition > 50) {
    navbar.addClass("navbarhover");
  } else {
    navbar.removeClass("navbarhover");
  }
});
.navbar::-webkit-scrollbar {
  width: 10px;
}
.navbar::-webkit-scrollbar-track {
  background: gray;
}
.navbar::-webkit-scrollbar-thumb {
  background: red;
}
.navbarhover::-webkit-scrollbar-thumb {
  background: black;
}
.navbar::-webkit-scrollbar-thumb:hover {
  background: blue;
}
.navbar {
  display: block;
  align-items: center;
  height: 100px;
  overflow-y: scroll;
  background-color: transparent;
}
.top-bar-content.active {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar" id="navbar">
  <ul class="nav">
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contactar</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contactar</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contactar</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contactar</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.