Heim > Web-Frontend > js-Tutorial > Wie kann ich die Sichtbarkeit von Elementen beim Scrollen mit jQuery erkennen?

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

DDD
Freigeben: 2024-11-01 03:21:02
Original
1059 Leute haben es durchsucht

How can I detect element visibility during scrolling with jQuery?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage