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

我有一个有一些部分的网站，有一个“图像部分”，这个部分大约有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>

乱数假文

我的小提琴：

---

（在js部分，顶部是bullseye插件，忽略它）

您已经在更改覆盖层的不透明度与距离顶部的关系，因此您可以对距离底部做类似的操作。大概是这样的：

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

---

回答得很好，谢谢，但是我如何才能使距离底部不取决于文档高度？这是可能的吗？当然，你可以用任何可滚动的容器，看看这个小提琴，你可以看到它：好吧，我没有用可滚动的容器。。。我测试了它，但我必须在容器中准确滚动，当我像往常一样滚动时，事件不会触发。。当我想隐藏带有溢出隐藏的滚动条时，它不再工作了。这只是一个想法，你必须玩一下它，在这里检查小提琴的更新：