js判断元素是否在可视区域内

判断元素是否在可视区域内，在的话显示，否则隐藏

请点击demo地址

需求：
为每个页面元素添加效果，当元素滚动到可视区域内时缓慢显示并有一定位移效果

分析：
如果想为每个元素都添加能添加这种效果，有一个统一的class名字是最好操作的，
那么如何判断有哪些元素在可视区，哪些不在可视区而确定是否让其显示，

代码：
css代码，给每一个叫CfadeInUp的元素添加动画，设置好animation的动画效果，动画名字要用js来添加；

@keyframes CfadeInUp        {            from {transform: translateY(50px);}            to {transform: translateY(0px);                opacity:1;}        }        .CfadeInUp{            width: 100%;            height: 100px;            background-color: #000;            margin-bottom: 100px;            opacity: 0;            animation: 1s ease  forwards  alternate;        }

js代码

(function animateUp(){    var obj = $('.CfadeInUp');    var objH= $('.CfadeInUp').outerHeight();    var num = [];    var wH  = $(window).height();    var wScrollTop = $(window).scrollTop();    // 获取页面所有obj的top位置，存入数组    for(var i=0; i<obj.length;i++){        num.push(obj.eq(i).offset().top+(objH/3));    }    // console.log(num)    // 循环数组，判断obj的位置是否在可视区中    function judgeTop(){        for(var j=0; j<num.length;j++){            if (num[j] >= wScrollTop && num[j] < (wScrollTop+wH)) {                obj.eq(j).css({                    'animation-name':'CfadeInUp',                    'opacity':'1'                });            }        }    };    // 页面初始化时先调用一次    judgeTop();    // 触发滚动事件调用判断函数    $(window).scroll(function(event) {        wH = $(window).height();        wScrollTop = $(window).scrollTop();        judgeTop();    });})();