2

Estou tentando trocar a cor da minha navbar de acordo com o scroll da pagina, ex:

Ela começa como transparente, mas quando eu der scroll ela fica branca, se eu der scroll pra cima novamente, ela volta a ficar transparente, só que não tá rolando, ela fica branca quando eu desço, mas não volta pro transparente quando eu subo.

O que estou fazendo de errado?

document.addEventListener("scroll", function() {
  var posicaoy = document.scrollTop;
  if (posicaoy == 0) {
    navbar.style.backgroundColor = "trasnparent";
  } else {
    navbar.style.backgroundColor = "white";

  }
});

2 Respostas 2

1

Usa window.pageYOffset para saber a posição do scroll, o document.scrollTop deveria ser document.documentElement.scrollTop pois é um método de elementos, e não vai dar o que queres.

E repara no erro que tinhas em trasnparent... deve ser transparent.

var navbar = document.querySelector('nav');
document.addEventListener("scroll", function() {
  var posicaoy = window.pageYOffset;
  console.log(posicaoy);
  navbar.style.backgroundColor = posicaoy == 0 ? "transparent" : "white";
});
html,
body {
  margin: 0px;
  padding: 0px;
}

#longa {
  height: 4000px;
  background-color: #ddf;
  width: 100%;
}

nav {
  width: 100%;
  height: 100px;
  position: fixed;
  border: 2px solid #fee;
}
<nav></nav>
<div id="longa"></div>

0

Uma sugestão seria alterar somente a opacidade, e ao invés de usar document.scrollTop utilizei window.pageYOffset, seu código ficaria assim:

document.addEventListener("scroll", function() {
  var posicaoy = window.pageYOffset;
  if (posicaoy == 0) {
    navbar.style.opacity = "0.8";
  } else {
    navbar.style.opacity = "1";
  }
});

Segue um exemplo funcional, espero que ajude:

document.addEventListener("scroll", function() {
  var posicaoy = window.pageYOffset;
  if (posicaoy == 0) {
    navbar.style.opacity = "0.8";
  } else {
    navbar.style.opacity = "1";
  }
});
body {
  height: 800px;
  background-color: black;
  color: red;
}

#navbar {
  background-color: white;
  color: green;
  height: 60px;
  width: 100%;
  position: fixed;
  opacity: 0.8;
}
<div id="navbar">NAVBAR</div>

<body>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et lacinia nulla. Aliquam accumsan, ligula sed pellentesque malesuada, dui eros iaculis sapien, at fringilla nisi turpis vitae odio. Sed convallis enim non tellus fringilla, at pretium
  tortor pretium. Sed iaculis quis mauris convallis porttitor. Nunc semper, dui sed porta molestie, dui ante dignissim augue, at tincidunt lorem odio in lorem. Phasellus consequat hendrerit faucibus. Sed turpis felis, ultricies et ipsum eu, lobortis ullamcorper
  turpis. In vel laoreet sapien. Donec semper faucibus dui vitae ultrices. Cras ornare, tellus et placerat sagittis, nunc tortor lacinia augue, quis mollis sapien magna sed risus. Duis vestibulum eros sit amet justo commodo, nec dignissim quam scelerisque.
  Nunc diam elit, iaculis a semper et, rutrum vitae orci. Pellentesque iaculis sit amet erat eget condimentum. Maecenas porta velit velit, sed dignissim metus venenatis vitae. Integer porttitor venenatis lacus vitae feugiat. Mauris a massa interdum, malesuada
  justo vel, rhoncus odio. Vivamus hendrerit sapien et pretium pretium.
</body>

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 .