Lorsque l'élément apparaît dans la fenêtre, exécutez la fonction

Question

Comment puis-je exécuter une fonction sur un élément dès qu'il apparaît dans la fenêtre lorsque je défile vers le bas?

Answer 1

je pourrais aussi bien poster ici comme une réponse:

function elementInView($elem, vps, vpe) { 
    var elempos = $elem.position(); 
    var pagestart = elempos.top + vps; 
    var pageend = elempos.top + vps + $elem.height(); 
    var offset = $elem.height() - Math.max(0,vps-pagestart) - Math.max(0,pageend-vpe);  
    return (vpe > 0 && offset > -200); 
} 

$('#container').bind('scroll', function() { 
    var $container = $(this); 
    var vps = $container.scrollTop(); 
    var vpe = vps + $container.height(); 

    $('li', '#container').each(function() { 
     var $this = $(this); 
     if (elementInView($this,vps,vpe)) { 
      // $this is now in view 
     } 
    }); 
}); 

Je sais que cela a des problèmes de performance, et peut être optimisé, mais il devrait être un début.

Answer 2

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
} 

via https://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling