Heim >Web-Frontend >js-Tutorial >Wie löst man ein Ereignis aus, wenn man in jQuery zu einem bestimmten Element scrollt?

Wie löst man ein Ereignis aus, wenn man in jQuery zu einem bestimmten Element scrollt?

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 13:41:02950Durchsuche

How to Trigger an Event When Scrolling to a Specific Element in jQuery?

Ereignis auslösen, wenn mit jQuery ein bestimmtes Element erreicht wird

Problem

Ein Benutzer möchte eine Warnmeldung anzeigen, wenn er auf einer Webseite nach unten scrollt und diese erreicht ein bestimmtes h1-Element. Sie haben versucht, das scroll()-Ereignis zu verwenden, aber es hat nicht funktioniert.

Lösung

Um festzustellen, wann das h1-Element in die Browseransicht gelangt, müssen wir seinen Versatz von oben berechnen und vergleichen es mit dem aktuellen Scroll-Wert. Hier ist der überarbeitete Code:

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

Verbesserungen

  • Demo Fiddle: Ein Live-Beispiel ohne Warnung, stattdessen mit Einblendung des h1-Elements.
  • Aktualisierter Code: Prüft jetzt, ob sich das Element im Ansichtsfenster befindet, unabhängig von der Scrollrichtung.
  • Aktualisierte Demo-Fiddle: Zeigt die Funktionalität des aktualisierten Codes .

Das obige ist der detaillierte Inhalt vonWie löst man ein Ereignis aus, wenn man in jQuery zu einem bestimmten Element scrollt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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