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()
}

})

制作一个jQuery粘性标题，带有多个标题

1 个答案: