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

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

1 个答案: