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

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:

• 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>

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!