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

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!