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

Question

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

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

<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部分中，顶部是Bullseye插件，请忽略它）

Answer 1

您已经在更改与顶部之间的距离的关系上的覆盖层的不透明度，因此您可以对与底部之间的距离进行类似的操作。 像这样：

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