1

mi pregunta es simple o eso creo xD. Quiero que al bajar el scroll cambien los colores de un texto ya sea que se inviertan los colores o las clases en su defecto x.x Y no tengo idea de como hacerlo, creo que con jquery pero realmente no soy bueno en eso.

<!DOCTYPE html>
<html>
  <head>
    <title> Testing </title>
  </head>
  <body>
   <style>
     body{
       height: 1000px
     }
     .hola{
       color: white;
     }
     .mundo{
       color: red;
     }
   </style>
   <p class="hola">Hola <span class="mundo">Mundo</span></p>
  </body>
</html>
1
  • Olvidé decir que el "hola mundo" es un navbar fixeado. Saludos.
    – GrayWolf
    Commented el 1 mar. 2019 a las 18:34

1 respuesta 1

0

Hola para lograr eso es muy fácil, tienes que añadir al body el evento scroll

<body onscroll="myFunction()">

Luego en tu función debes de detectar a que posición está el scroll vertical con window.scrollY

Entonces la función quedaría algo parecido a

function myFunction() {

    if(window.scrollY > 0)
        document.getElementById(id).style.color  = 'black';
    else
        document.getElementById(id).style.color  = 'white';

}

Ejemplo: (Para poder visualizarlo recuerda que el elemento tiene que estar fijo o nov eras el cambio al realizar el scroll)

function funcion() {
    
        if(window.scrollY > 0)
            document.getElementById("hola").style.color  = 'black';
        else
            document.getElementById("hola").style.color  = 'white';
    
    }
<!DOCTYPE html>
<html>
  <head>
    <title> Testing </title>
  </head>
  <body onscroll="funcion()">
   <style>
     body{
       height: 1000px
     }
     .hola{
       color: white;
     }
     .mundo{
       color: red;
     }
     p {
     position: fixed;
     }
   </style>
   <p id="hola" class="hola">Hola <span class="mundo">Mundo</span></p>
  </body>
</html>

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.