0
I am trying to modify a code that already works very well. I have this menu:
<div id = "menu" >
<a href = "index.html"> <img src = "images/logo.png" style = "padding-left: 5%; padding-top: 1%;"> </a>
<ul id = "lista">
<li style = "display: inline-block;"> <a href = "aboutus.html"> <padding left> SOBRE O INSTITUTO </a></li>
<li style = "display: inline-block;"> <a href = "pessoas.html"> PESSOAS</a> </li>
<li style = "display: inline-block;"> <a href = "universidadefour.html"> UNIVERSIDADE FOUR </a>
<ul>
<a href = "programaprolider.html"> <li> PROGRAMA PROLÍDER </li> </a>
<a href = "universidadefour.html#escolapolitica"> <li> ESCOLA DE POLÍTICA </li> </a>
<a href = "universidadefour.html#escolaempreendedorismo"> <li> ESCOLA DE EMPREENDEDORISMO </li> </a>
</ul> </li>
<li style = "display: inline-block;"> <a href = "comunidadefour.html"> <padding left> COMUNIDADE FOUR </a>
<ul>
<a href = "comunidadefour.html"> <li> A COMUNIDADE FOUR</li> </a>
<a href = "comunidade.html"> <li> FELLOWS </li> </a>
</ul>
</li>
<li style = "display: inline-block;"> <a href = "foursummit.html"> FOUR SUMMIT </a> </li>
<li style = "display: inline-block;"> <a href = "trabalheconosco.html"> VAGAS ABERTAS</a> </li>
<li style = "display: inline-block;"> <a href = "en-index.html"> EN </a> <span style = "color: white;"> |</span> <a href = "index.html"> BR </a> </li>
</ul>
</div>
This menu, by default, has no background-color, but when the user slides through the site the background color changes:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("menu").style.backgroundColor = "#fff";
} else {
document.getElementById("menu").style.backgroundColor = "";
}
}
I would like to do the same thing to change the color of the links from white to black after the user scrolls the site. How can I do this?
How about a CSS class for each state of these?
– Felipe Carriel