是否可以在一定数量的滚动像素上发生动画？答案

【问题标题】：Is it possible to have an animation occur over a set number of scrolled pixels?是否可以在一定数量的滚动像素上发生动画？
【发布时间】：2016-01-06 20:15:43
【问题描述】：

我想做的是：

在用户向下滚动页面 600 像素（或向下滚动 20%）后，在接下来的 800 像素（或页面的下一个 10% 距离）上会出现动画。文本将从右向左移动，因此从 0 到 -200%。它应该以 600 像素开始动画并以 1400 像素结束动画。这可能吗？

目前我想这样做：

$('.div1').css({
    'position' : 'fixed',
    'top' : '-32%',
    'display' : 'block',
    'width' : '100%'
}).addClass('locked');

在达到 600px 后移动到顶部 div，强制它在下一个 div 动画时不移动。当我的文本正在动画并可能覆盖内容时，如何防止页面的其余部分向上滚动？

【问题讨论】：

为了防止事情“向上移动”，您必须将这些 .div1 div 包装在另一个不设置动画并保留原始位置的 div 中（一旦设置 position:fixed 它已从标准布局流程中删除，并且所有内容都“向上移动”以进行补偿）。

标签： javascript jquery css animation

【解决方案1】：

Skrollr 会这样做。

检查一下。

https://github.com/Prinzhorn/skrollr

【讨论】：