[RESOLVIDO] Mudar cor de navbar ao rolar

Front-end
, , , ,
#1

Olá pessoal, gostaria de fazer um efeito que a navbar muda de cor ao rolar a página. Achei um post no stackoverflow que tem exatamente o que eu quero. Mas no meu não funciona e não consigo entender porquê.

Meu index.js:

const desiredElement = document.getElementById('nav-bar-list-id'); // elemento alvo
const pixelsAmount = '50'; // Quantidade de pixels a contar do TOP até definir a cor

window.addEventListener('scroll', function() {
    if (window.scrollY > pixelsAmount) {
    	desiredElement.classList.add('changeStyle'); // adiciona classe "changeColor"
    } else {
      desiredElement.classList.remove('changeStyle'); // remove classe "changeColor"
    }
});

Meu index.css:

/* Nova classe a ser atribuída ao elemento com os estilos desejados */
.changeStyle {
  background-color: whitesmoke;
  box-shadow: 0 0 1em gray;
}
.nav-bar-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
  position: fixed;
  transition: background-color 0.3s ease-in-out;
}

Alguém consegue me ajudar?

#2

falai, bom dia! coloca o código no jsfiddle, pra eu entender como ficou no html

#3

não entendo, pus o código no codepen e funcionou. Mas não funciona em nenhum dos meus navegadores (Chrome, Edge, Firefox e Brave).

#4

pode ser que tenha algum css no seu projeto que esteja sobrescrevendo alguma estilização. Como vc falou isso, o cenario mudou um pouco… se quiser colocar no github pra eu baixar e testar aqui, seria bom

#5

Mas o código inteiro está lá.
Mesmo assim segue o link do repositório no git

#6

Bom dia. entendi o que houve, vc colocou o seu <script> dentro do head, por isso não funciona, o script estava sendo executado antes do DOM ser finalizado.

Como no codepen tudo ja tinha sido renderizado, o que vc esperava ia funcionar normalmente.

Solução:

Mova o trecho

<script src="index.js"></script>

para ficar abaixo do scroll-container.
Então o esperado deve ficar assim:

...
</scroll-container>
<script src="index.js"></script>
1 curtida
#7

Muito noob da minha parte. Obrigado.