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>