как активировать функцию запуска счётчика?

````https://codepen.io/olegpanchenko1999/pen/gOemOrY````

как активировать функцию запуска счётчика в момент, когда пользователь проскролит до начала родительского блока чтобы было видно запуск счётчика с самого начала( сейчас счётчик активируется просто от скролла. а мне нужно чтобы активировался тогда когда класс родительского блока появиться на экране)? сейчас сам блок находиться в конце страницы и пока я доскролю до него счётчик уже закончит считать и будет выглядеть как статический элемент.

   var time = 20,
    cc = 1;
    $(window).scroll(function () {
        $("#counter").each(function () {


            if (cc < 2) {
                $(".number").addClass("viz");
                $("div").each(function () {
                    var i = 1,
                        num = $(this).data("num"),
                        step = (10 * time) / num,
                        that = $(this),
                        int = setInterval(function () {
                            if (i <= num) {
                                that.html(i);
                            } else {
                                cc = cc + 2;
                                clearInterval(int);
                            }
                            i++;
                        }, step);
                });
            }
        });
    });

хочу активировать эту функцию в момент, когда родительский блок при скролле появиться на экране

<div class="block"> 
  
</div>



<div class="intro__homepage__flex__right__block">
                                <div class="counter" id="counter">
                              
                                    <div class="bl">
                                        <div data-num="1997" class="number">0</div>
                                        <div class="counter__text">gründung</div>
                                    </div>
                                    <div class="bl">
                                        <div data-num="51" class="number">0</div>
                                        <div class="counter__text">mitarbeitende</div>
                                    </div>
                                    <div class="bl">
                                        <div data-num="16" class="number">0</div>
                                        <div class="counter__text">nationen und<br> sprachen</div>
                                    </div>
                                    <div class="bl">
                                        <div data-num="2" class="number">0</div>
                                        <div class="counter__text">standorte</div>
                                    </div>
                                    <div class="bl">
                                        <div data-num="6" class="number">0</div>
                                        <div class="counter__text">Fachabteilungen</div>
                                    </div>
                              
                                </div>
                        </div> 
  



     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>