原生JS实现下滑到当前模块时，上浮显示

源码：

<div style="height: 1000px;"></div>
<!-- 图 -->
<div class="yingxiao-box">
    <div id="yingxiaoimg" class="yingxiao-img"><img
            src="https://alp.alicdn.com/1703175009746-2100-220.png"
            alt=""></div>
</div>
<style>
    .yingxiao-img {
        text-align: center;
        transform: translateY(100%);
        /* 初始位置在视口下方 */
        opacity: 0;
        transition: transform 1s ease, opacity 1s ease;
        /* 平滑过渡效果 */
    }

    .visible {
        transform: translateY(0);
        /* 滑到视口内 */
        opacity: 1;
    }


</style>
<script>
    // 节流函数  
    function throttle2(func, limit) {
        let lastFunc;
        let lastRan;
        return function () {
            const context = this;
            const args = arguments;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(function () {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(context, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    }

    function checkElementVisibility2(element) {
        var rect = element.getBoundingClientRect();
        var viewHeight = window.innerHeight || document.documentElement.clientHeight;
        var offset = 500; // 提前开始动画的偏移量  

        if (rect.top < viewHeight + offset) {
            element.classList.add('visible');
            element.classList.remove('hidden');
        } else {
            // 如果需要，可以在这里添加逻辑来移除 'visible' 类  
            // 当元素完全离开视口时  
        }
    }

    // 使用节流包装 checkElementVisibility  
    const throttledCheck2 = throttle2(checkElementVisibility2, 200); // 每200毫秒最多执行一次  

    document.addEventListener('scroll', function () {
        var target = document.getElementById('yingxiaoimg');
        if (target) {
            throttledCheck2(target);
        }
    });  
</script>