jquery - facebook 应用样式 向下滚动时 Conceal 标题栏，向上滚动时再次显示

Question

在 facebook 的 iphone 应用程序上，当向下滚动时，标题栏会缩小并 Conceal 。当向上滚动时，它会再次显示。

我想复制这个，但也添加另一个 div 来跟进。
我创建了一个简单的 fiddle 来展示我到目前为止所做的尝试:

http://jsfiddle.net/0z6tqqyk/2/

但是，当在初始页面加载时向下滚动时，操作工作正常。但是当向上滚动时，在动画发生之前会有延迟。

再次向下滚动时，会有延迟。对实现我的目标有什么帮助吗？

    var lastScrollTop = 0;
    $("#container").scroll(function(event) {
      var st = $(this).scrollTop();
      if (st > lastScrollTop) {
        $("#header").animate({
          'marginTop': '-40px'
        }, 200);
        $("#title").animate({
          'marginTop': '0'
        }, 200);
      } else {
        $("#header").animate({
          'marginTop': '0'
        }, 200);
        $("#title").animate({
          'marginTop': '40px'
        }, 200);
      }
      lastScrollTop = st;
    });

Answer 1

你有动画添加和搞乱时间使用.stop()添加新动画之前的 API。

经过一些测试:这个配置似乎是最一致的:

   $("#header").stop(true, false).animate({ 'marginTop': '-40px'}, 100);
   $("#title").stop(true, false).animate({ 'marginTop': '0'}, 100);