숫자 카운팅을 넣었는데 페이지 로딩되자마자 실행이 되어 정작 스크롤을 내려 확인하면 숫자가 멈춰있습니다.  해당 영역 스크롤 되었을때 숫자 카운팅이 실행되게 하려면 어떻게 해야하나요?

<div class="sec sec-about1">
    
        <div class="c">
        <div class="header">
            <div class="desc"><span class="txt-bc1">설립년도
</span>
            <h1 class="count_num"></h1></div>
            <div class="desc"><span class="txt-bc1">가맹점
 </span>
            <h1 class="count_num2"></h1></div>
        </div>

        
    </div>

    
    <script>
     
    $({ val : 0 }).animate({ val : 1973 }, {
  duration: 2000,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".count_num").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".count_num").text(num);
  }
});

$({ val : 0 }).animate({ val : 7500 }, {
  duration: 3000,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".count_num2").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".count_num2").text(num);
  }
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "");
}
    
</script>
</div>