根据高度在滚动时更改不透明度

Question

我在一个页面上有多个部分。每个都有一个从不1透明度开始的叠加层。当您滚动它到达0元素底部位于页面顶部时，我希望它减少不透明度。

我将此代码基于此处的另一个问题，它几乎适用于一个问题，但我想对页面上的多个元素执行此操作，这就是问题所在。当我尝试它时，每个后续元素开始时不透明，如果窗口大小减小，情况会更糟。

$(window).scroll(function () {
    var homeTop = $(window).scrollTop();
    var height = $(window).height() / 2;

    $('#splashback-home').css({
        'opacity': ((height - homeTop) / height)
    });
});

对于.splashback该类的任何元素，我如何才能使其动态化？

我在想这样的事情？

    $('.splashback').each(function () {
        var scrollTop = $(window).scrollTop();
        var thisTop = $(this).offset().top;
        var thisHeight = $(this).height();
        newOpacity = ???
        if (newOpacity > 1) newOpacity = 1;
        $(this).css({'opacity': newOpacity});
    });

Answer 1

你很接近 - 你需要考虑每个元素的偏移量.splashback：

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

  $(".splashback").each(function() {
    var height = $(this).height();
    var offset = $(this).offset().top;
    var opacity = (height - homeTop + offset) / height;

    $(this).css("opacity", opacity);
  });
});

div {
  background: red;
  height: 1000px;
  margin-bottom: 100px;
}

.splashback {
  background: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Some div (will not fade)</div>
<div class="splashback">Some div splashback 1</div>
<div class="splashback">Some div splashback 2</div>
<div>Some div (will not fade)</div>