jQuery: Come posso attivare un evento quando viene visualizzato un div?

Question

C'è un modo in cui posso attivare un evento con jQuery quando la pagina scorre abbastanza lontano da consentire la visualizzazione di un div?

Answer 1

Penso che dovrai agganciare l'evento di scorrimento e controllare manualmente. Ecco una domanda simile:

Check if element is visible after scrolling

Speranza che aiuta.

Bob

Answer 2

Il plugin waypoint copre questo e molto altro ancora. http://imakewebthings.com/jquery-waypoints/

Documenti: http://imakewebthings.com/jquery-waypoints/#docs

esempio:

$('.someSelector').waypoint(function(direction){ 
//do stuff 
},{ 
//bottom-in-view will ensure event is thrown when the element's bottom crosses 
//bottom of viewport. 
offset: 'bottom-in-view' 
}); 

Answer 3

se si desidera attivare una funzione quando fondo di vista, ha colpito parte superiore del suo sito web, è possibile utilizzare questa funzione:

$('.ModuleWrapper').waypoint(function (direction) { 
    // Codes Here 
}, { 
    offset: function() { 
     return $(this).height(); 
    } 
}); 

o quando il fondo della vista tocca la parte inferiore del contenuto, è possibile utilizzare anche questa funzione:

$('.ModuleWrapper').waypoint(function (direction) { 
    // Codes Here 
}, { 
    offset: function() { 
     return -1 * $(this).height(); 
    } 
}); 

utilizza waypoint

Answer 4

Un plugin jQuery che aggiunge un evento associabile 'inview' per rilevare quando un elemento scorre in vista.

https://github.com/protonet/jquery.inview

Answer 5

Se avete solo bisogno di sparare una volta:

$(window).scroll(function(){ 
    // This is then function used to detect if the element is scrolled into view 
    function elementScrolled(elem) 
    { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop)); 
    } 

    // This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element 
    if(elementScrolled('. box2')) { 


    // Your function here 

    } 
}); 

risposta completa: https://www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery