Jquery scrollTop动画

Question

我有一个动画，一旦scrollTop（）命中页面上的给定位置就需要启动。那部分工作正常，但我想要的是当我向上滚动页面时，动画反转，将元素返回到它的原始位置。

http://cdpn.io/dphBx

我的示例中的代码工作正常，JS与我在本地工作的网站相同，但在Chrome中，当您向上滚动页面时，元素不会返回到原始位置。 JQuery是我链接的唯一Javascript，因此没有冲突，并且CSS中没有任何东西也应该阻止它。当谈到JQuery时，我仍然很绿，所以请耐心等待。我想也许if / else语句不是最好的方法来完成这个？有什么想法吗？

Answer 1

它适用于我，在Mac上使用Chrome 31。但是，您应该尝试以下修改来提高性能：

1. 在链接动画之前使用.stop(true, true)，以确保动画完成。
2. 调整或去抖调整大小事件，使其不会经常触发，保存需要执行的计算次数，并防止在两个动画结束状态之间快速切换。
3. 使用$(window).scrollTop()而不是身体获取滚动位置。

我决定使用jQuery throttle + debounce插件：http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js

$(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");
    }
  }));
});