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

Question

我看到了很多与用户滚动时修改元素不透明度相关的问题，但还没有找到一个可以帮助我按需要提供帮助的问题。试了好几个公式都没有达到我想要的效果。

我有一个带有 BG 图像的标题，其中有一个用作叠加层的 div，我希望它在用户向下滚动时逐渐变暗(不透明度增加)。

编辑:想要的效果是:

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

fiddle :https://jsfiddle.net/z7q2qtc6/

<div class='nice-header'>
  <div class='header-overlay'></div>
</div>

CSS

.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;
}

JS

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

Answer 1

您可以使用 .scrollTop() method 检索当前滚动位置.

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

Example Here

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

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

如果您想考虑元素的初始不透明度 0.2:

Updated Example

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

    return opacity;
  }
});