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