滚动后更改CSS

Question

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

\n

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

\n

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

\n

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

\n

另外，我不擅长 JavaScript，有时我不知道应该把代码放在哪里。因此，如果有什么方法可以用 CSS 来完成这一切，那就太棒了！

\n

这是我想要的示例\xe2\x80\x94向下滚动时密切注意标题。

\n

Answer 1

如果您想要本机解决方案，请使用：

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

这是一个现场演示

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

function changeCss () {
  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
}