Auslösen eines jquery-Ereignisses, wenn ein Element auf dem Bildschirm erscheint

Question

Ich möchte einen Fade-Effekt anzeigen, sobald das Element auf dem Bildschirm angezeigt wird. Es gibt eine Menge Inhalt vor diesem Element. Wenn ich den Effekt auf document.ready triggere, werden die Besucher das bei bestimmten Auflösungen nicht sehen.

Kann ein Ereignis ausgelöst werden, wenn nach dem Scrollen das Element sichtbar wird? Ich bin mir fast sicher, dass ich diesen Effekt schon einmal gesehen habe, aber ich habe keine Ahnung, wie ich das erreichen kann.

Vielen Dank!

Answer 1

jQuery Das Wegpunkt-Plugin könnte nützlich sein. Es bietet eine Möglichkeit, eine Aktion auszulösen, wenn ein Element auf dem Bildschirm sichtbar wird.

Zum Beispiel:

$('.entry').waypoint(function() { 
    alert('The element has appeared on the screen.'); 
}); 

Es gibt einige Beispiele auf the site of the plugin.

Answer 2

Eine schnelle Suche ergab diese Erweiterung viewport für jQuery, mit der Sie die Sichtbarkeit eines Elements im Ansichtsfenster überprüfen können. Wenn sich Ihr Element nicht im Ansichtsfenster befindet, führen Sie Ihre Einblendungsanimation nicht aus.

Answer 3

Ich glaube, Sie beziehen sich auf die jQuery-Plugin "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

Von den Quellcode suchen, sieht es aus wie das Plugin tut etwas wie folgt aus:

$('#item').one('appear', function() { 
    // Do stuff here 
}); 

Answer 4

Dieses funktioniert für mich besser als die anderen in diesem Beitrag: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

Die Verwendung ist einfach:

$('#element').visible() 

können Sie sehen, wie dieses Plugin verwendet wird Ihre Wirkung hier zu erstellen:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() { 
    $(".module").each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass("come-in"); 
     }); 
    } 
$(window).scroll(function() { 
    viewable(); 
}); 
$(window).blur(function() { 
    viewable(); 
}); 

Wenn Sie Tabs verwenden. (zum Beispiel jQuery UI Tabs) müssen Sie überprüfen, ob die Registerkarte aktiv ist.

$(window).scroll(function() { 
    if($('#tab-1').hasClass('active')) { 
     viewable(); 
    } 
}); 

Answer 5

Jquery.appear plugin ist der beste Weg, um dieses Problem zu lösen.

demo.

Answer 6

Wenn Sie schauen, um ein Ereignis zu feuern, wenn ein bestimmtes oder Zielelement scrollt in Sicht, können Sie dies tun, indem Sie die folgenden Werte zu bestimmen:

1. die Fensterhöhe
2. die Scroll-Abstandswert von dem oberen Rand des Fensters
3. den festgelegten oder Zielelement der Abstand von der Oberseite des Fensters

Beachten Sie Folgendes:

jQuery(window).on('scroll', function(){ 

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top), 
     windowHeight = jQuery(window).height(), 
     windowScrollValFromTop = jQuery(this).scrollTop(); 

    // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods 
    if ((windowHeight + windowScrollValFromTop) > elValFromTop) { 
     console.log('element is in view!'); 
     jQuery('.target-el').addClass('el-is-visible'); 
    } else { 
     jQuery('.target-el').removeClass('el-is-visible'); 
    } 

}); 

Code Snippet Demonstration:

Der folgende Code-Schnipsel zeigt ein Ausführungsbeispiel eines gemeinsamen Problems: ein Element an das Ansichtsfenster, wenn ein bestimmtes Element blättert in dem Blick zu fixieren.

/* Sticky element on-scroll */ 
 
jQuery(window).on('scroll', function(){ 
 

 
    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top), 
 
     elHeight = jQuery('.target-el').outerHeight(), 
 
     windowHeight = jQuery(window).height(), 
 
     windowScrollValFromTop = jQuery(this).scrollTop(), 
 
     headerHeightOffset = jQuery('.fixed-header').outerHeight(); 
 
     
 
    if ((windowHeight + windowScrollValFromTop) > elValFromTop) { 
 
     console.log('element is in view!'); 
 
     console.log(headerHeightOffset); 
 
     jQuery('.will-change-el').addClass('fixed-el').css('top',headerHeightOffset).text('fixed'); 
 
    } else { 
 
     jQuery('.will-change-el').removeClass('fixed-el').css('top','0').text('static'); 
 
    } 
 
    
 
    // using template literals for multi-line output formatting 
 
    // comment out to observe when target element comes into view 
 
    console.log(` 
 
     how far is the target element from the top of the window: ${elValFromTop} 
 
     what is the target element's height: ${elHeight} 
 
     what is the window height: ${windowHeight} 
 
     what is the window's scroll value distance from the top: ${windowScrollValFromTop} 
 
     what is the sum of the window height and its offset value from the top: ${windowHeight + windowScrollValFromTop} 
 
     `); 
 
     
 
});

/* || Reset & Defaults */ 
 
body { 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    font-family: arial; 
 
} 
 

 
/* || General */ 
 
.target-el { 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
.target-el, 
 
.will-change-el { 
 
    transition: .7s; 
 
    text-align: center; 
 
    background: #ededed; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.fixed-el { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.fixed-header { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100px; 
 
    text-align: center; 
 
    background: #ededed; 
 
    border-bottom: 1px solid #ccc; 
 
    z-index: 9; 
 
} 
 

 
.buffer-el { 
 
    height: 1000px; 
 
    padding-top: 100px; 
 
    background: whitesmoke; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fixed-header"> 
 
    <h1>Fixed Header</h1> 
 
</div> 
 
<div class="buffer-el"> 
 
    <div class="will-change-el">static</div> 
 
</div> 
 
<div class="target-el">the target element</div>

Sandbox Beispiel:CodePen

HINWEIS:
Dies gilt nur, Aktionen auf dem Dokument scrollen und nicht an verschachtelte Elemente innerhalb eines Scroll-Ansichtsbereich enthalten .

Answer 7

Wenn Sie eine einfache und Arbeits sollution wollen:

function elementInView(elem){ 
    return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ; 
}; 

$(window).scroll(function(){ 
    if (elementInView($('#your-element'))) 
    //fire at will! 
    console.log('there it is, wooooohooooo!'); 
});