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)请使用.stop(true, true) ，以确保动画完成。
2. 对调整大小事件进行节流或去抖动，这样就不会经常触发该事件，从而节省了需要执行的计算数量，并防止了过于频繁地在两个动画结束状态之间快速切换。
3. 使用$(window).scrollTop()而不是正文获取滚动位置。

我决定使用此处提供的jQuery节流+防弹插件： 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");
    }
  }));
});