Aufkleben und Ersetzen von Überschriften am oberen Rand des Fensters beim Scrollen

Question

In dem Projekt, an dem ich arbeite, habe ich eine Reihe von Divs mit Fotos, jedes mit einem Label, das das JJJJ/MM/TD der Fotos auflistet.

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

Die Funktionalität, die ich zu erreichen versuche, ist die Beschriftung der aktuellen div Stick an den oberen Rand des Fensters, wie Sie durch scrollen, so dass Sie wissen, welche Fotos Sie betrachten. Wenn die nächste div von Fotos durch gescrollt wird, ersetzt diese Beschriftung die stecken Etikett, wie es den oberen Rand des Fensters erreicht.

1) Ich kämpfe, um effiziente Wege zu finden, um zu erkennen, wenn ein Etikett am oberen Rand des Fensters ist. Ich mag nicht die folgenden, da durch jedes Etikett zu suchen scheinen wie Overkill (die "stuckToTop" Klasse fügt feste Positionierung des Etiketts).

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

Ich habe es auch versucht:

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

Gibt es Vorschläge für einen eleganteren Ansatz?

2) Ich möchte auch, dass die neue Beschriftung die zuvor aufgeklebte Beschriftung nach oben schiebt, wenn die Seite nach oben gescrollt wird. Denselben Effekt sehen Sie, wenn Sie durch die Fotogalerie von Picasa blättern, da neue Abschnittsbeschriftungen die vorherigen aus dem Weg schieben.

Ich vermute, dies bedeutet, dass ich die Position der stuckToTop-Etikette nach oben jedes Mal anpassen müssen, wenn die neue Beschriftung höher nach oben gescrollt wird, schließlich ersetzen Sie es?

Gracias.