facebook应用风格隐藏标题栏向下滚动时，滚动时再次显示

Question

在facebook的iphone应用中，向下滚动标题栏时会缩小和隐藏。当滚动备份它再次显示。

我想复制这个，但也加入另一个div，如下所示。
我创建了一个简单的小提琴表现出我所到目前为止已经试过：

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);