Javascript Jquery滚动顶动画

我有一个动画，需要在scrollTop（）点击页面上的给定位置时启动。这一部分工作正常，但我想让动画在我向上滚动页面时反转，将元素返回到其原始位置

---

我的示例中的代码运行良好，JS与我在本地工作的站点相同，但在Chrome中，当您向上滚动页面时，元素不会返回到其原始位置。JQuery是我链接到的唯一Javascript，因此没有冲突，CSS中也没有任何东西可以阻止它。说到JQuery，我还是很生疏的，所以请容忍我。我在想，也许if/else语句不是实现这一点的最佳方式？有什么想法吗？

在Mac上使用Chrome 31对我来说很有效。但是，您应该尝试以下修改以提高性能：

在链接动画之前，请使用

.stop（true，true）

，以确保动画完成

限制或取消大小调整事件的大小，使其不会太频繁地触发，从而节省需要执行的计算数量，并防止在两个动画结束状态之间太频繁地快速切换

使用

$（窗口）获取滚动位置。scrollTop（）

而不是在主体上

我决定使用jQuery throttle+debounce插件，该插件可在以下位置获得：

---

在Chrome 31上运行良好。虽然我会使用

$（窗口）。scrollTop

而不是

body

。它在Chrome 31中也适用于我，但是在动画启动之前有一点延迟。谢谢Terry！你能解释一下油门/去盎司是如何工作的吗？JQuery中是否包含类似的功能？我尽量不依赖插件，以便尽可能深入地了解它。此外，我仍然对stop（）的工作原理感到困惑。它确保动画完成似乎是违反直觉的。@Brad jQuery动画的问题在于它排队-换句话说，动画可以被视为一个事件，根据它们添加到元素中的顺序依次发生。在这种情况下，如果您在200px阈值之间快速上下滚动，将导致添加大量

.animate（）

，并排队，导致浏览器延迟，FPS下降，因为需要不断重新定位

。\foo

@Brad

。stop（true，true）

所做的是告诉元素，“嘿，放下你现在正在做的事情，立即移动到结束状态，继续我给你的最新动画”。对于节流，你当然可以使用setTimeOut（）并自己进行一些调整，但我依赖I jQuery插件，因为它更方便。关于它的工作原理，请查看以下链接：

$(document).ready(function(){
  $(window).scroll($.throttle(100, function(){
    var position = $("window").scrollTop();
    if(position >= 200){
      $("#foo").stop(true,true).animate({left: "200px"}, "fast");
    } else{
      $("#foo").stop(true,true).animate({left: 0}, "fast");
    }
  }));
});