从滚动位置更改叠加不透明度

Question

我有一个包含一些部分的网站，有一个"图像部分"，该部分高度约为 3000px，背景图像是固定的，所以我得到了很好的效果 - 一段时间后滚动到这个图像部分，我想显示一个信息文本。这部分已经可以正常工作了。

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

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