Scroll Event

Navigation
1

I'm trying to change the color of my navbar according to the page scroll, eg:

It starts as transparent, but when I scroll it turns white, if I scroll up again, it becomes transparent again, but it's not rolling, it turns white when I go down, but it does not come back transparent when I climb.

What am I doing wrong? 

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

  }
});
    
asked by anonymous 01.04.2017 / 18:13

2 answers

1

Use window.pageYOffset to know the position of the scroll, document.scrollTop should be document.documentElement.scrollTop because it is a method of elements, and will not give what you want.

And notice the error you had in trasnparent ... should be 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>
    
01.04.2017 / 19:00
0

A suggestion would be to change only the opacity, and instead of using document.scrollTop I used window.pageYOffset , your code would look like this: 

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

Here is a working example, hope it helps: 

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>
    
01.04.2017 / 18:53
Delete words from a file If does not compare Char