Создание липкого заголовка 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) с каждым и сделал его методом rangeчтобы предотвратить лишние, бесполезные запросы.

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

})