如何在滚动时为 div 设置动画？答案

【问题标题】：How to animate div on scroll?如何在滚动时为 div 设置动画？
【发布时间】：2014-10-19 14:49:43
【问题描述】：

您好，我可以在滚动时更改和切换 div 属性，但是当我使用动画时，它不起作用，但方式很奇怪。

以下作品：

$(document).scroll(function() {
$("#register").css({left: $(this).scrollLeft() > 1348? "-140px":"0px"});
});

但这行不通：

$(document).scroll(function() {
$("#register").animate({left: $(this).scrollLeft() > 1348? "-140px":"0px"});
});

当我滚动超过 1348 时，我希望 div 消失，如果滚动小于 1348，则 div 应该再次出现。

简单的 css 可以工作，但动画不起作用。

【问题讨论】：

在每个注册的滚动事件中，CSS 应用肉眼不可见的更改，这意味着，如果 document.scrollLeft 为 animate 在每个滚动刻度上。您采取了哪些措施来防止这种情况发生？

【解决方案1】：

我会推荐使用 skrollr.js

典型用法很简单：

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

其中 data-number 表示当前滚动位置。

动画可以使用 css 传输来完成。

【讨论】：