懒加载实例

判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。

   function isVisiblie($node){
            var windowH = $(window).height(),
            scrollT = $(window).scrollTop(),
            offsetT = $node.offset().top,
            nodeH =  $node.height();
    if(windowH + scrollT > offsetT && scrollT < offsetT + nodeH ){
                    return true;
            }else{ 
                  return;
        }
      }

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。

 function logVisible($node){
    $(window).on('scroll',function(){
        var scrollTop = $(this).scrollTop(),
            winH = $(this).height(),
            top = $node.offset().top;
    if (scrollTop+winH>top) {
        console.log('true');
    }
    })    
}
 logVisible($('div'));

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印true，以后再次出现不做任何处理。

        var hadshow = false;
        $(window).on('scroll',function(e){
              var $ct = $('.show');
          if(!hadshow && isVisiblie($ct) ){  
          console.log(true);
           hadshow = true;
      }
  });

        function isVisiblie($node){
            var windowH = $(window).height(),
            scrollT = $(window).scrollTop(),
            offsetT = $node.offset().top,
            nodeH =  $node.height();
    if(windowH + scrollT > offsetT && scrollT < offsetT + nodeH ){
                    return true;
            }else{ 
                  return;
        }
      }

实例

pic
news