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

最新推荐文章于 2024-08-20 10:00:03 发布

原创最新推荐文章于 2024-08-20 10:00:03 发布 · 9.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #动画

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现的动画效果，当页面元素滚动到可视区域内时，该元素会逐渐显示并伴随位移效果。通过计算元素位置与可视区域的关系来控制动画的触发。

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

请点击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();
    });
})();