Блог

Главная - Вопросы по программированию - Создание липкого заголовка jQuery с заголовками нескольких файлов

Создание липкого заголовка jQuery с заголовками нескольких файлов

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

Я пытаюсь имитировать, как 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, он слишком быстро удалял divs. Я немного улучшил его и хотел бы получить больше информации, но это работает хорошо и без перегрузки:

 $(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 amp;amp; y <= maxY 24) {
                newtext = header.children('em').text();
                if(newtext != curtext) {
                    curtext = newtext;
                    $('.afloat').text(newtext)
                }
            }
        })
    } else {
        isset = false;
        $('.afloat').remove()
    }
})

Мне пришлось переделать логику здесь. Я сразу же создал статический заголовок, как только он был применим, так что мне не нужно продолжать клонировать divs.

Затем я просматриваю divs (.the-post) с каждым из них и сделал его методом диапазона, чтобы предотвратить дополнительные, бесполезные запросы.

Комментарии:

1. проверьте, нет ли ошибок где-нибудь в середине кода, обычно это причина, по которой скрипт выполняется только для одного элемента. Я думаю, что это может быть заголовок этой строки.clone()

2. Я понял это, он слишком быстро удалял элементы!

3. опубликуйте свой ответ, чтобы я мог выбрать его по пунктам, если хотите

Ответ №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 amp;amp; y <= maxY 24) {
            newtext = header.children('em').text();
            if(newtext != curtext) {
                curtext = newtext;
                $('.afloat').text(newtext)
            }
        }
    })

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

})