Прикрепление и замена заголовков в верхней части окна при прокрутке - PullRequest
Новая
       41

Прикрепление и замена заголовков в верхней части окна при прокрутке

2 голосов
/ 24 декабря 2010

В проекте, над которым я работаю, у меня есть несколько div с фотографиями, каждый с меткой, в которой указаны YYYY / MM / DD фотографий внутри. 

<div class="photoCollection">
    <div class="label">
        2010-12-24
    </div>
    <div class="photos">
        <img>
        ...
        <img>
    </div>
</div>

Функциональность Iя пытаюсь добиться, чтобы при прокрутке ярлык текущего элемента div вставлялся в верхнюю часть окна, чтобы вы знали, какие фотографии вы просматриваете.Когда прокручивается следующий блок фотографий, эта метка заменяет застрявшую метку, когда она достигает верхней части окна.

1) Я изо всех сил пытаюсь найти эффективные способы определения, когда метка находится сверхуокна.Мне не нравится следующее, так как просмотр каждой метки кажется излишним (класс «stuckToTop» добавляет фиксированное позиционирование к метке). 

$('.label').each(function()
{
    if ( $(this).offset().top < $(window.)scrollTop() )
    {
        $(this).addClass('stuckToTop');
}

Я также пробовал: 

$('.label').filter(function()
{
    return $(this).offset().top < $(window.)scrollTop;
}).addClass('stuckToTop');

Есть ли какие-либо предложения для более элегантного подхода?

2) Я также хотел бы, чтобы новая метка выдвигала ранее застрявшую метку вверх при прокрутке страницы.Этот же эффект вы увидите при просмотре фотогалереи Picasa, поскольку новые метки разделов вытесняют предыдущие.

Я предполагаю, что это означает, что мне придется корректировать положение метки stuckToTop вверх каждый раз, когда новая метка прокручивается выше к вершине, в конечном итоге заменяя ее?

Спасибо!

1 Ответ

4 голосов
/ 24 декабря 2010

Я бы посоветовал для фиксированных прокручиваемых заголовков посмотреть видеофильм jQuery для дизайнеров Реми Шарпа ( Демо здесь ), хотя он сравнивает его с меню контактов iPhone, а не Picasa, но оба звучат достаточно схоже.

Я думаю, его руководство рассматривает оба вопроса вашего вопроса.

...