Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie löst man mit jQuery ein Ereignis aus, wenn ein bestimmtes Element in das Ansichtsfenster des Benutzers gelangt?

Patricia Arquette
Freigeben: 2024-10-31 09:47:02
Original
729 Leute haben es durchsucht

How to Trigger an Event When a Specific Element Enters the User's Viewport using jQuery?

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

Im Code oben:

  • offset(). top gibt den Abstand vom oberen Rand des Dokuments zum oberen Rand des Elements zurück.
  • outerHeight() gibt die Höhe des Elements einschließlich Abstand und Ränder zurück.
  • Wir prüfen, ob die Bildlaufposition größer als ist der Versatz des Elements abzüglich seiner Höhe und der Fensterhöhe, um sicherzustellen, dass es im aktuellen Ansichtsfenster sichtbar ist.

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

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

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!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage