Scroll event

Asked

Viewed 835 times

2

I’m trying to change the color of my navbar according to the page scroll, ex:

It starts as transparent, but when I give it a scroll it turns white, if I scroll up again, it turns transparent, only it’s not rolling, it turns white when I go down, but it doesn’t go back to transparent when I go up.

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

  }
});
javascript html css rolling

2 answers

1


Usa window.pageYOffset to know the position of the scroll, the document.scrollTop should be document.documentElement.scrollTop 'cause it’s an element method, and it’s not gonna get you what you want.

And look at the mistake you made in trasnparent... must 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>

0

A suggestion would be to change only the opacity, and instead of using document.scrollTop 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";
  }
});

Follow a functional example, I 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>

Browser other questions tagged javascript html css rolling

You are not signed in. Login or sign up in order to post.