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

 function isVisible($node){
    var windowHeight = $(window).height(),   //窗口的高度
        scrollTop = $(window).scrollTop(),     //滚动距离顶点的距离
        offsetTop = $node.offset().top,     //传递的参数距离顶点的距离
        nodeHeight = $node.height();    //节点的自身高度

    if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){   
        return true;
    }else{
        return false;
    }
 }

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

<p id="hello">hello</p>

 $(window).on('scroll',function(){
     if(isVisible($('#hello'))){
         console.log(true)
     }                    
 })

 function isVisible($node){
    var windowHeight = $(window).height(),   //窗口的高度
        scrollTop = $(window).scrollTop(),     //滚动距离顶点的距离
        offsetTop = $node.offset().top,     //传递的参数距离顶点的距离
        nodeHeight = $node.height();    //节点的自身高度

    if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){   
        return true;
    }else{
        return false;
    }
 }

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

<p id="hello">hello</p>

$(window).on('scroll',function(){
    if(isVisible($('#hello')) && !$('#hello').hasClass('show')){  
        $('#hello').addClass('show')   //当出现过一次后加个标签
        console.log(true)
    }                 
})

 function isVisible($node){
    var windowHeight = $(window).height(),   //窗口的高度
        scrollTop = $(window).scrollTop(),     //滚动距离顶点的距离
        offsetTop = $node.offset().top,     //传递的参数距离顶点的距离
        nodeHeight = $node.height();    //节点的自身高度

    if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){   
        return true;
    }else{
        return false;
    }
 }