如何在视口顶部应用滚动动画+计算适当的百分比？

Question

我正在尝试在滚动时以增量方式为路径设置动画。我正在遵循here 和here 概述的技术。我将动画区域分成多个部分，并且我正在使用航路点来激活每个部分。一旦被激活（当段的顶部到达视口的顶部时），段会监听滚动事件，然后根据这个 sn-p 计算要动画的行的百分比：

var scrollPercentage = rect.top / rect.height;

这似乎工作正常，codepen 是here。但是我需要这个动画在片段到达视口顶部之前开始，比如当它距离顶部 100px 时。我还需要一种方法来计算 rect.top 在 0 到 100 之间时的百分比。由于某种原因，当我添加条件语句时，它要么是 a。不开火或 b.向后绘制路径：

    if (rect.top > 0 && rect.top < 100) {
      //unsure what how to calulate and trigger before
      //top of viewport
      //var scrollPercentage = ?;
    } else if (rect.top < 0 && rect.bottom > 0) {
      var scrollPercentage = rect.top / rect.height;
    }

Answer 1

您只需为rect 顶部和底部值添加一个偏移量。然后在比较中使用该值。

我称之为prestart。

var prestart = 100;
if ((rect.top - prestart) < 0 && (rect.bottom - prestart) > 0) {
  var scrollPercentage = (rect.top - prestart) / rect.height;
}