Jquery / Javascript findet das erste sichtbare Element nach dem Scrollen

Lesezeit: 2 Minuten

Ich habe Code wie unten:

<div id="container">
<div class="item" id="1">blah blah</div>
<div class="item" id="2">blah blah 2</div>
</div>

Aber eigentlich gibt es viele, viele mit class=”item”.

Während der Benutzer diese große lange Liste von Elementen scrollt, möchte ich den Stil des aktuellen oben sichtbaren Elements ändern (wie Google Reader!). Habe in jquery oder einfachem Javascript nach einer Lösung gesucht, kann aber keine finden. Hat jemand Ideen?

Danke

markieren

Jquery Javascript findet das erste sichtbare Element nach dem
kevingessner

Wenn Ihre Elemente nicht die gleiche Höhe haben, können Sie sie beim Scrollen durchlaufen:

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    $('.item').removeClass('top').each(function() {
        if ($(this).offset().top > cutoff) {
            $(this).addClass('top');
            return false; // stops the iteration after the first one on screen
        }
    });
});

Wenn dies zu langsam ist, können Sie $(‘.item’).offset() in einem Array zwischenspeichern, anstatt jedes Mal offset() aufzurufen.

  • Danke, funktioniert super mit einer kleinen Optimierung, fügt eine Zahl der 25 hinzu, so dass sie ausgewählt werden, kurz bevor sie den oberen Rand des Fensters erreichen, sonst wird die ausgewählte halb weggescrollt, bevor die nächste ausgewählt wird

    – Mark Milford

    10. Februar ’10 um 9:48

  • $(‘.item’).offset() funktioniert nicht, da – offset die aktuellen Koordinaten des ersten Elements in der Menge der übereinstimmenden Elemente relativ zum Dokument erhält.

    – paraS elixiR

    3. Okt ’17 um 13:18

Hier ist eine weitere Idee, die auf integrierten Javascipt-Funktionen basiert.

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself)
var element = range.startContainer.parentNode; // this an upper onscreen element

Dieser Code ist kein gebrauchsfertiges Produkt – es ist nur ein Beispiel, das nur in Webkit-Browsern funktioniert. Wenn Sie es verwenden möchten, sollten Sie nach browserübergreifenden Äquivalenten von suchen caretRangeFromPoint()

Sie können Ihren eigenen Scroller mit Javascript erstellen.

Es ist keine sehr praktische Idee, aber Sie können es versuchen.

Und platzieren Sie den Link zu dem Bild, das es besser beschreibt. Es wäre sehr brauchbar.

  • Das Hinzufügen eines Implementierungsbeispiels oder zumindest eines Implementierungsparadigmas oder einer Implementierungstechnologie wäre hilfreich. Beschreiben Sie es besser, z.

    – Luis Masuelli

    27. März ’14 um 17:07

.

389520cookie-checkJquery / Javascript findet das erste sichtbare Element nach dem Scrollen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy