jQuery: ¿Cómo puedo activar un evento cuando aparece un div?

Question

¿Hay alguna manera de activar un evento con jQuery cuando la página se desplaza lo suficiente para que aparezca un div?

Answer 1

Creo que tendrá que enganchar en el evento de desplazamiento y comprobar manualmente. Aquí hay una pregunta similar:

Check if element is visible after scrolling

Espero que ayude.

Bob

Answer 2

El plugin waypoints cubre esto y más. http://imakewebthings.com/jquery-waypoints/

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

por ejemplo:

$('.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

si desea activar una función cuando la parte inferior de vista, golpeó la parte superior de su contenido, puede utilizar esta función:

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

o cuando la parte inferior de la vista, toque la parte inferior de su contenido, también puede utilizar esta función:

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

que utiliza waypoint

Answer 4

Un plugin jQuery que añade un evento enlazable 'InView' para detectar cuando un elemento se desplaza a la vista.

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

Answer 5

Si sólo tiene que disparar una vez:

$(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 

    } 
}); 

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