制作一个jQuery粘滞标题，带有多重页眉标题

Question

我试图模仿gMail如何将标题粘贴到滚动上方的标题上，当它经过某个部分时。

代码：

$(window).scroll(function() { 
    $('.the-post').each(function() { 
     var elem = $(this), 
      y = $(window).scrollTop(), 
      maxY = elem.children('.body').offset().top, 
      header = elem.children('.header'), 
      scrollHeight = 24; 

     if(y >= maxY-scrollHeight) { 
      $('.afloat').remove(); 
      header 
       .clone() 
       .appendTo('.post') 
       .addClass('afloat'); 
      setSizes() 
     } else $('.afloat').remove() 
    }) 
}) 

我使用.clone（），因为我不想打断页的高H。当仅仅添加课程时，会有轻微的推动，这正是我想要避免的。

但是，它只在其中的一个帖子上。有人能看到为什么吗？

我也想停止运行函数，一旦头部在那里，窗口在边界内。

UPDATE

所以我想通了这一点。上述代码的问题在于else语句，它将删除div太快。我改进它颇有几分也许需要一些更多的投入，但这种工作状态良好，无过载：

$(window).scroll(function() { 
    var y = $(this).scrollTop(); 
    if(y >= maxY-24) { 
     if(!isset) { 
      isset = true; 
      $('.post').append(header 
       .clone() 
       .addClass('afloat') 
      ) 
     } 
     $('.the-post').each(function() { 
      var elem = $(this), 
       maxY = elem.children('.body').offset().top, 
       header = elem.children('.header'); 
      if(y >= maxY-24 && y <= maxY+24) { 
       newtext = header.children('em').text(); 
       if(newtext != curtext) { 
        curtext = newtext; 
        $('.afloat').text(newtext) 
       } 
      } 
     }) 
    } else { 
     isset = false; 
     $('.afloat').remove() 
    } 
}) 

我在这里重新做的逻辑。一旦适用，我立即创建了静态头，这样我就不必克隆div。

然后我运行每个div（.the-post），并使其成为范围方法，以防止多余的无用查询。

Answer 1

答案是：如果

$(window).scroll(function() { 

var y = $(this).scrollTop(); 
if(y >= maxY-24) { 
    if(!isset) { 
     isset = true; 
     $('.post').append(header 
      .clone() 
      .addClass('afloat') 
     ) 
    } 
    $('.the-post').each(function() { 
     var elem = $(this), 
      maxY = elem.children('.body').offset().top, 
      header = elem.children('.header'); 
     if(y >= maxY-24 && y <= maxY+24) { 
      newtext = header.children('em').text(); 
      if(newtext != curtext) { 
       curtext = newtext; 
       $('.afloat').text(newtext) 
      } 
     } 
    }) 

} else { 
    isset = false; 
    $('.afloat').remove() 
} 

})