从滚动位置更改覆盖不透明度

Question

我有一个包含一些部分的网站，有一个“图像部分”，这个部分的高度约为 3000 像素，背景图像是固定的，所以我得到了一个很好的效果 - 过了一会儿滚动到这个图像部分我想要显示信息文本。这部分已经可以正常工作了。

我想要的： 在显示文本并经过一小段时间（我的意思是几个滚动步骤）阅读文本后，我想在部分结束前大约 100 像素处将不透明度降低到 0（滚动位置）。

<section class="box red">

</section>
<section class="box blue">

</section>
<section class="image-section">
  <div class="overlay">
    <div class="overlay-text">
      lorem ipsum
    </div>
  </div>
</section>
<section class="box red mysection">

</section>
<section class="box blue">

</section>

我的小提琴：https://jsfiddle.net/e53f9m55/3/ （在js部分顶部是靶心插件，忽略它）

Answer 1

您已经根据与顶部距离的关系更改了叠加层的不透明度，因此您可以对距底部的距离执行类似的操作。像这样的：

var distanceFromBottom = $(document).height() - $(window).height() - $(window).scrollTop();
opacity_text = distanceFromBottom / $(document).height();
$(".overlay-text").css({"opacity" : opacity_text});