使用多个标头制作 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() 因为我不想中断页面的高度。刚刚添加课程时，会有轻微的推动，而这正是我想要避免的。

然而，它只在其中一个帖子上执行此操作。有人能看出为什么吗？

我还想在标题存在且窗口位于边界内时停止运行该函数。

更新

所以我想通了。上面代码的问题是 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()
}

})