How to run a js script at a specific location?

Question

JavaScript

Hello.
There is a counter animation script, and this script is loaded immediately when you run the page. And when you reach a certain place, the counter has already finished its work.
It is necessary to make the script start working when the screen crawls to these elements or block.

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 5555,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Answer 1

Put the code in a function and call it on the scroll event when it reaches the element you need:

function start_count() {
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 5555,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

$(function() {
    var oTop = $('.count').offset().top - window.innerHeight;
    $(window).scroll(function(){
        var pTop = $('body').scrollTop();
        if( pTop > oTop ){
            start_count();
        }
    });
});