javascript - 滚动后更改 CSS

Question

我有一个导航栏，它使用一些 CSS 来改变不透明度:

.navbar {
    background-color: #4B5253;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}

我需要 opacity更改为 1.0在用户向下滚动一定数量的像素后，例如 500px .

我正在使用 jQuery，但我没有找到解决方案。

另外，我不擅长 JavaScript，有时我不知道应该把我的代码放在哪里。因此，如果有任何方法可以使用 CSS 完成所有这些工作，那就太好了!

Here is an example of what I want —向下滚动时请密切注意标题。

Answer 1

如果你想要一个原生的解决方案，那么使用这个:

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}
window.addEventListener("scroll", changeCss , false);

这是一个现场演示

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}

window.addEventListener("scroll", changeCss , false);

body{
  background-color: white;
  height: 1000vh
}
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  text-align: center;
  background: blueviolet
}
nav li{display: inline-block}
nav a{
  padding: 10px 12px;
  color: white;
  text-transform:uppercase;
  text-decoration: none
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>