Auslösen eines Ereignisses, wenn der Benutzer mit jQuery zu einem bestimmten Element scrollt
In diesem Szenario möchten Sie bei einem bestimmten Element eine Warnung anzeigen Das h1-Element (mit der ID „scroll-to“) gelangt in die Browseransicht des Benutzers. Um dies zu erreichen, berechnen Sie den Versatz des Elements vom oberen Rand der Seite und vergleichen ihn mit der aktuellen Scroll-Position:
<code class="javascript">$(window).scroll(function() { var elementOffsetTop = $('#scroll-to').offset().top; var elementHeight = $('#scroll-to').outerHeight(); var windowHeight = $(window).height(); var scrollTop = $(this).scrollTop(); if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) { console.log('H1 on the view!'); } });</code>
Im Code oben:
Sie können das Ereignis auch ändern, um andere Aktionen wie das Einblenden des Elements beim Eintritt in das Ansichtsfenster auszuführen:
<code class="javascript">$(window).scroll(function() { var elementOffsetTop = $('#scroll-to').offset().top; var elementHeight = $('#scroll-to').outerHeight(); var windowHeight = $(window).height(); var scrollTop = $(this).scrollTop(); if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) { $('#scroll-to').fadeIn(); } });</code>
Zusätzlich können Sie zur Verbesserung der Erkennungslogik Prüfungen hinzufügen, um festzustellen, ob sich das Element vollständig im Ansichtsfenster befindet:
<code class="javascript">$(window).scroll(function() { var elementOffsetTop = $('#scroll-to').offset().top; var elementHeight = $('#scroll-to').outerHeight(); var windowHeight = $(window).height(); var scrollTop = $(this).scrollTop(); if (scrollTop > (elementOffsetTop + elementHeight - windowHeight) && elementOffsetTop > scrollTop && (scrollTop + windowHeight > elementOffsetTop + elementHeight)) { //Do something } });</code>
Diese aktualisierte Logik stellt sicher, dass das Ereignis nur ausgelöst wird wenn das Element im Ansichtsfenster vollständig sichtbar ist, unabhängig von der Scrollrichtung.
Das obige ist der detaillierte Inhalt vonWie löst man mit jQuery ein Ereignis aus, wenn ein bestimmtes Element in das Ansichtsfenster des Benutzers gelangt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!