2

Tengo una navbar transparente con texto blanco, cuando hago scroll down a la pagina esta se vuelve de color sólido-blanco y me gustaría que el texto cambiara a color negro. ¿Cómo puedo hacerlo?

Actualmente uso el evento window onScroll de esta manera:

var nav = document.getElementById('nav');
window.onscroll = function() {
  if (window.pageYOffset > 100) {
    nav.style.background = "#FFFFFF";
    nav.style.boxShadow = "0px 4px 10px gray";
  } else {
    nav.style.background = "transparent";
    nav.style.boxShadow = "none";
  }
}
html,body {
  background: #aaa;
}

.navbar {
  width: 100%;
  padding: 5px;
  position: fixed;
  top: 0px;
  text-align: center;
  transition: .5s;
  z-index: 999;
}

.navbar ul li {
  list-style-type: none;
  display: inline-block;
  padding: 1px 60px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
  transition: .5s;
}

.navbar a {
  color: white;
}
<div class="header">
  <div class="navbar" id='nav'>
    <ul id="ulis">
      <li><a href="#index">Home</a></li>
      <li><a href="Ubicacion.html">Ubicacion</a></li>
      <li><a href="#videos">Video</a></li>
      <li><a href="#1">Contact</a></li>
      <li><a href="#3">About</a></li>
    </ul>
  </div>
</div>


<div style="margin-top: 1000px">Hola!</div>

1 respuesta 1

2

Una opción que te puede simplificar el asunto es añadir/eliminar una clase cuando se haga scroll y en CSS definir los estilos de navbar y enlaces. Tal y como lo tienes ahora, si vas a cambiar más y más cosas, puede hacerse demasiado complejo. Pero cambiando la clase, sólo tienes que controlar una cosa.

Para añadir la clase harías algo como esto:

nav.classList.add("clase-a-añadir");

Y para quitarla:

nav.classList.remove("clase-a-quitar");

Que integrado con tu código se vería así:

var nav = document.getElementById('nav');
window.onscroll = function() {
  if (window.pageYOffset > 100) {
    nav.classList.add("white");
  } else {
    nav.classList.remove("white");
  }
}
html,body {
  background: #aaa;
}

.navbar {
  width: 100%;
  padding: 5px;
  position: fixed;
  top: 0px;
  text-align: center;
  transition: .5s;
  z-index: 999;
}

.navbar ul li {
  list-style-type: none;
  display: inline-block;
  padding: 1px 60px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
  transition: .5s;
}

.navbar a {
  color: white;
}

/* añade estilos específicos para cuando se haga scroll */
.navbar.white {
  background: #ffffff;
  box-shadow: 0px 4px 10px gray;
}

.navbar.white a {
  color: black;
}
<div class="header">
  <div class="navbar" id='nav'>
    <ul id="ulis">
      <li><a href="#index">Home</a></li>
      <li><a href="Ubicacion.html">Ubicacion</a></li>
      <li><a href="#videos">Video</a></li>
      <li><a href="#1">Contact</a></li>
      <li><a href="#3">About</a></li>
    </ul>
  </div>
</div>


<div style="margin-top: 1000px">Hola!</div>

5
  • Wow, increible, muchas gracias, aun no logro comprender muy bien lo que haces, por que por ejemplo a donde se fue el valor para cambiar el color de la navbar? Y como es que aun se mantiene transparente al estar en el top? Commented el 4 oct. 2018 a las 1:53
  • @AlanRodriguez Perdón, voy a intentar explicarlo mejor: Si te fijas, al final del CSS, añadí dos nuevas reglas para cuando el navbar tenga la clase "white". .navbar.white tiene los mismos estilos que ponías antes con JavaScript y .navbar.white a es la que hace que los enlaces del navbar se vean en negro. Ahora que ya tenemos los estilos definidos con una clase, sólo necesitamos añadir/quitar esa clase. Esto simplifica las cosas porque si quieres cambiar más estilos, no tienes que añadir código en el JS, sólo en el CSS (y una única vez, en lugar de 2 como en JS)
    – Alvaro Montoro
    Commented el 4 oct. 2018 a las 1:56
  • Si, puede notarlo, o sea que si quiero hacer que mas cosas cambien en la barra deberia solo ponerlo en la nueva clase "white". Y por ejemplo, donde quedo la propiedad "transparent". No veo que este en ningun lado y aun asi la barra es transparente. Commented el 4 oct. 2018 a las 2:07
  • Eso es porque sólo hay dos tipos de estados: el normal (transparente) y cuando se hace scroll (con el fondo blanco). El normal son tus estilos originales.
    – Alvaro Montoro
    Commented el 4 oct. 2018 a las 2:08
  • El if else se podría simplificar utilizando toggle en lugar de add y remove. nav.classList.toggle('white',window.pageYOffset > 100)
    – Dev. Joel
    Commented el 5 oct. 2018 a las 21:10

Tu Respuesta

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

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