2

In the project I'm working on, I have a number of divs with photos, each with a label that lists the YYYY/MM/DD of the photos within.

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

The functionality I'm trying achieve is to have the label of the current div stick to the top of the window as you scroll through so you know which photos you're looking at. When the next div of photos is scrolled through, this label replaces the stuck label as it reaches the top of the window.

1) I'm struggling to find efficient ways to detect when a label is at the top of the window. I don't like the following since looking through every label seem like overkill (the "stuckToTop" class adds fixed positioning to the label).

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

I have also tried:

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

Are there any suggestions for a more elegant approach?

2) I would also like the new label to push the previously stuck label upwards as the page is being scrolled up. You'll see this same effect when you're scrolling through Picasa's photo gallery, as new section labels push the previous ones out of the way.

I'm guessing this means I'll have to adjust the position of the stuckToTop label upwards every time the new label gets scrolled higher towards the top, eventually replacing it?

Thanks!

4

1 回答 1

4

I'd suggest, for fixed-scrolling headers, watching Remy Sharp's jQuery for Designers video-cast (Demo here), albeit he compares it to the iPhone's contacts-menu, rather than Picasa, but the two sound similar enough.

I think his tutorial addresses both of your question's points.

于 2010-12-24T17:01:22.113 回答