當元素進入視窗執行功能

Question

當我向下滾動時，如何在元素進入視窗後立即對元素執行一個功能？

Answer 1

我還不如它張貼在這裏作爲一個答案：

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 
     } 
    }); 
}); 

我意識到這有一些性能問題，而且可以優化，但它應該是一個開始。

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