0

Estou tentando modificar um código que já funciona muito bem. Tenho este 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>

Este menu, no padrão, não tem background-color, mas quando o usuário desliza pelo site a cor de fundo muda:

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 = "";
  }
}

Eu gostaria de fazer a mesma coisa para mudar a cor dos links de branco para preto após o usuário scrollar o site. Como consigo fazer isso?

1
  • Que tal uma classe CSS para cada estado desses? 3/02/2021 às 17:31

1 Resposta 1

0

Só adicionar o seguinte trecho de códico a sua função scroll:

document.ElementsByTagName("li").style.color = "black"
2
  • Não funcionou... será que eu fiz alguma coisa errada? window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { document.getElementById("menu").style.backgroundColor = "#fff"; document.getElementsByTagName("li").style.color = "black"; } else { document.getElementById("menu").style.backgroundColor = ""; document.getElementsByTagName("li").style.color = ""; } }
    – mr_leal
    3/02/2021 às 22:26
  • 1
    Sim, está errado, o scrollTop está deprecado, aqui explica melhor como você deve usar stackoverflow.com/questions/19635188/…
    – Dakota
    3/02/2021 às 22:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .