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>