我正在尝试为滚动条制作动画，但目前我不知所措。最终结果应该与此网站上的线条动画类似，http://www.teslamotors.com/goelectric#range (您必须稍微滚动才能看到各行)。
有一条静态灰线，然后是一条红线，当用户向下滚动时，红线会获得高度。如果用户向上滚动而部分或全部红线可见，则将从红线中减去高度。但在用户向下滚动页面 200 像素之前，红线不会发生任何变化。
我已经为这个问题创建了一个 fiddle ，我很确定我知道我的问题出在哪里，但我没有如何解决它的答案。我认为这是因为我的 function countUp135 中的变量 currentScrollPosition 和 lastScrollPosition 始终彼此相等。
任何帮助将不胜感激。这是我的 fiddle : http://jsfiddle.net/tripstar22/2HDVA/5/
提前致谢!
最佳答案
虽然在 JS 中有很多方法可以做到这一点，但我将提供另一种 css 方法。您不必在滚动时对线条进行动画处理，而是可以给人一种线条正在动画化的错觉。查看this fiddle这里。正如您所看到的，fixed 红色元素将跟随滚动的窗口并填充 div 之间的透明区域，使其看起来像是正在绘制一条红线。
您可以用透明线覆盖图像而不是灰色 div，以进一步减少代码，或者您可以添加 js 以使动画更加精美。
关于javascript - 滚动动画线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23347756/