Wie löst man mit jQuery Ereignisse aus, wenn Benutzer bestimmte Elemente erreichen?

Ereignisse auslösen, wenn Benutzer bestimmte Elemente mit jQuery erreichen

Im Webdesign kann es nützlich sein, Ereignisse auszulösen, wenn Benutzer zu bestimmten Elementen scrollen auf einer Seite. Beispielsweise möchten Sie möglicherweise eine Benachrichtigung anzeigen oder eine Animation aktivieren, wenn ein Benutzer einen bestimmten Punkt erreicht.

Problem:

Stellen Sie sich ein h1-Element vor, das weit entfernt positioniert ist eine Seite nach unten:

<code class="html"><h1>TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

Sie möchten eine Warnung auslösen oder eine andere Aktion ausführen, wenn der Benutzer zu oder in Sichtweite dieses h1-Elements scrollt.

Lösung:

Die Lösung für dieses Problem besteht darin, das Scroll-Ereignis von jQuery zu nutzen und den Versatz und die Sichtbarkeit des Elements relativ zum Browser-Ansichtsfenster zu berechnen. Hier ist eine Schritt-für-Schritt-Demonstration:

<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) && (hT > wS) && (wS+wH > hT+hH)){
       console.log('H1 on the view!');
   }
});</code>

Dieses Code-Snippet:

1. Berechnet den Offset von h1:Es bestimmt den Abstand zwischen den Oberkante des h1-Elements und Oberkante des Ansichtsfensters.
2. Bestimmt die Höhe von h1:Es berechnet die Höhe des h1-Elements.
3. Abruft die Höhe des Ansichtsfensters: Berechnet die Höhe des Browser-Ansichtsfensters.
4. Ermittelt die aktuelle Bildlaufposition:Erfasst die aktuelle vertikale Bildlaufposition der Seite.
5. Vergleicht Offset und Scroll-Position: Es prüft, ob die aktuelle Scroll-Position im Bereich der Ober- und Unterseite des h1-Elements liegt, wobei die Höhe sowohl des Elements als auch des Ansichtsfensters berücksichtigt wird.
6. Löst das Ereignis aus:Wenn die Bedingungen erfüllt sind, die anzeigen, dass das h1-Element angezeigt wird, führt es die gewünschte Aktion aus, z. B. das Anzeigen einer Warnung oder das Aufrufen einer Animation.

Alternative Implementierung:

Anstatt eine Warnung anzuzeigen, können Sie diesen Ansatz verwenden, um das h1-Element einzublenden, wenn es sichtbar wird:

<code class="javascript">$('#scroll-to').fadeIn();</code>

Das obige ist der detaillierte Inhalt vonWie löst man mit jQuery Ereignisse aus, wenn Benutzer bestimmte Elemente erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!