Javascript 当用户向下滚动页面时，增加元素不透明度

我已经看到了很多关于在用户滚动时修改元素不透明度的问题，但还没有找到一个可以帮助我的方法。我试过几种配方，但都没有达到我想要的效果

我有一个带有BG图像的标题，里面有一个div，我用它作为覆盖，我希望它在用户向下滚动时变得越来越暗（不透明度增加）

编辑： 理想的效果是：

在CSS中，不透明度默认设置为0.2。当用户开始向下滚动时，它将从0.2增加到1。当用户再次向上滚动时，它将从1（或任何值）减少到0.2

小提琴：

JS

---

使用rbga代替rbg，并在用户滚动时更改alpha值。我显然不是100%确定你想要什么效果，但在大多数情况下使用rgba比使用rgb和不透明度更好

---

这里是另一篇文章的链接，详细解释了这一点。

您可以使用

要计算不透明度，请从元素高度中减去scrollTop值，然后将其除以元素高度

如果要考虑元素的初始不透明度

0.2

：

---

适用于任何试图这样做但方向相反的人（滚动时元素会淡出）

opacity=（（elementHeight-scrollTop）/elementHeight）


$（窗口）。滚动（函数（）{
var scrollTop=$（this.scrollTop（）；
$（'.header overlay'）.css({
不透明度：函数（）{
var elementHeight=$（this）.height（），
不透明度=（（elementHeight-scrollTop）/elementHeight）；
返回不透明度；
}
});
});
。不错的标题{
位置：相对位置；
高度：300px；
背景：中心；
背景尺寸：封面；
背景图片：url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
}
.标题覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgb（0,0,0）；
不透明度：1；
}
.笨蛋{
高度：900px；
}

谢谢好先生的回答。但我已经知道RGBA和RGB是什么了。这更像是一个问题，需要找到一个合适的公式来计算相对于卷轴从0.2增加到1的值。啊，我理解-我道歉！这是一个更复杂的解决方案！如果您可以使用Jquery，那么您应该能够编写一个简单的函数，将用户可以滚动的总数量除以8，每次它跳到下一个范围时，将不透明度增加.1，这将使您的最大滚动时间（或最小滚动时间，随您的需要）为1.0-我希望这至少能帮助你朝着一个更有用的方向前进。哦，太聪明了！这正是我需要的！而且很容易调整
<div class='nice-header'>
  <div class='header-overlay'></div>
</div>

.nice-header {
  position: relative;
  height: 300px;
  background: center center;
  background-size: cover;
  background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
}

.header-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgb(0,0,0);
  opacity: 0.2;
}

$(window).scroll(function() {
  $('.header-overlay').css({
    opacity: function() {
      var opacity = 0;
      //TODO:
      //Set opacity to a higer value whilst user scrolls
      return opacity;
    }
  });
});

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();

  $('.header-overlay').css({
    opacity: function() {
      var elementHeight = $(this).height();
      return 1 - (elementHeight - scrollTop) / elementHeight;
    }
  });
});

$('.header-overlay').css({
  opacity: function() {
    var elementHeight = $(this).height(),
        opacity = ((1 - (elementHeight - scrollTop) / elementHeight) * 0.8) + 0.2;

    return opacity;
  }
});