2

Tengo una navbar transparente con texto blanco, cuando hago scroll down a la pagina me gustaría que el texto cambiara a color negro. ¿Cómo puedo hacerlo?

Adjunto mi código JS:

$(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#header').addClass('header-scrolled');
            $('#topbar').addClass('topbar-scrolled');
        } else {
            $('#header').removeClass('header-scrolled');
            $('#topbar').removeClass('topbar-scrolled');
        }
    });

Adjunto mi código CSS:

Trate de colocar un color: black desde CSS pero no me funciono

#header {
    background: rgba(53, 50, 50, 0);
    transition: all 0.5s;
    z-index: 997;
    padding: 15px 0;
    top: 30px;
}

#header.header-scrolled {
    top: 0;
    /*  background: linear-gradient(#616168dc, black);*/
    background: linear-gradient(#b4b4b8c2, rgb(255, 255, 255));
    color: black;
}

Adjunto mi código HTML:

<header id="header" class="fixed-top ">
        <div class="container d-flex align-items-center">

            

            <a href="index.html" class="logo mr-auto scrollto"><img src="assets/img/logoqfs.png" alt="" class="img-fluid"></a>

            <nav class="nav-menu d-none d-lg-block">
                <ul>
                    <li class="active"><a href="index.html">Inicio</a></li>
                        <ul>
                            <li><a href="iso45001-2018.html">HOLA</a></li>                                                  
                        </ul>
                    </li>
                    <li><a href="#portfolio">Proceso de Certificación</a></li>
                </ul>
            </nav>
        </div>
    </header>
3
  • 1
    Hola @Mayra, ¿podrías proporcionar el código HTML asociado a la pregunta? el 25 ene. 2021 a las 5:12
  • si claro, una discula el 25 ene. 2021 a las 5:15
  • Ya lo he añadido, espero me pueda auxiliar. el 25 ene. 2021 a las 5:20

1 respuesta 1

4

Me parece que tu problema es porque estás estableciendo el color negro a todo el #header. Para el caso de los links vas a tener que agregar el siguiente código CSS:

#header.header-scrolled a {
    color: black;
}

Esto se llama "especificidad" e indica cómo los navegadores calculan las propiedades CSS.

1
  • Tienes razón, me olvide del detalle de ser especifica. Ya lo he probado y me funciono perfectamente, muchísimas gracias ^_^ el 25 ene. 2021 a las 5:39

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.