滚动动画线

Question

我试图在滚动上设置一条线，但我现在处于亏损状态。最终结果应该类似于此网站上的线条动画，http://www.teslamotors.com/goelectric#range（您必须滚动一点才能到达线条）。

有一条静态灰线，然后是一条红线，当用户向下滚动时会获得高度。如果用户向上滚动部分或全部红线可见，则将从红线中减去高度。但是，在用户向下滚动200px之前，红线不会发生任何事情。

我为这个问题创造了一个小提琴，我很确定我知道我的问题在哪里，但我没有解决方法。我认为这是因为currentScrollPosition中的变量lastScrollPosition和function countUp135始终相等。

非常感谢任何帮助。这是我的小提琴： http://jsfiddle.net/tripstar22/2HDVA/5/

提前致谢！

Answer 1

虽然在JS中有很多方法可以做到这一点，但我会提供另一种css方法。而不是在滚动上设置线条动画，你可以给出线条动画的错觉。在这里查看this fiddle。如您所见，fixed红色元素将在滚动窗口后面，并填充div之间的透明区域，使其看起来像是绘制了一条红线。

您可以使用贯穿它的透明线覆盖图像而不是灰色div，以使代码最小化，或者您可以添加js以使动画更加精美。

Answer 2

你的小提琴中有很多功能，我不明白为什么你需要它们，也不知道它们做了什么。你小提琴的updated version似乎可以做你想要的。没有必要采用所有方法。

这似乎已经足够了：

var scrollTop = getScrollTop();
if (scrollTop > 200) {
    addHeightPath1(scrollTop - 150);
} else {
    addHeightPath1(0);
}

我也想知道函数 stoppedScrolling ，其中异步时间函数正在启动，但是你试图从 stoppedSrolling（）函数得到一个结果，永远不会作为回报传递。