Wie kann ich die Sichtbarkeit von Elementen beim Scrollen mit jQuery erkennen?

Elementsichtbarkeit beim Scrollen mit jQuery erkennen

Beim Navigieren auf einer Webseite mit umfangreichen Inhalten ist es wichtig, bestimmte Aktionen auszulösen, wenn Benutzer bestimmte Elemente erreichen. In diesem Artikel wird gezeigt, wie Sie mit jQuery ein Ereignis auslösen, wenn ein Benutzer zu einem bestimmten HTML-Element scrollt.

Einrichten des Elements

Stellen Sie sich eine HTML-Seite mit einem h1-Element vor, das weit unten positioniert ist:

<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

Auslösen des Ereignisses mit jQuery

Das Ziel besteht darin, eine Warnung anzuzeigen, wenn die Browseransicht des Benutzers das h1-Element erreicht. Während man zunächst versuchen kann, die scroll()-Methode für das h1-Element zu verwenden:

<code class="js">$('#scroll-to').scroll(function() {
    alert('you have scrolled to the h1!');
});</code>

dieser Ansatz wird nicht das gewünschte Ergebnis liefern. Stattdessen ist es notwendig, den Versatz des Elements relativ zur Seite zu berechnen und ihn mit der Bildlaufposition zu vergleichen.

Die Lösung

<code class="js">$(window).scroll(function() {
    var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT + hH - wH)) {
        console.log('H1 on the view!');
    }
});</code>

Der obige Code prüft, ob der untere Teil des h1-Elements wurde im sichtbaren Teil der Seite erreicht.

Verbesserungen

• Demo Fiddle: Erleben Sie die Funktionalität aus erster Hand.
• FadeIn() anstelle von Alert: Verwenden Sie fadeIn(), um die Sichtbarkeit des Elements nahtlos zu animieren.
• Element-Sichtbarkeitsprüfung: Ändern Sie das Skript, um zu erkennen, ob sich das Element vollständig im Ansichtsfenster befindet , unabhängig von der Scrollrichtung.

Das obige ist der detaillierte Inhalt vonWie kann ich die Sichtbarkeit von Elementen beim Scrollen mit jQuery erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!