JavaScript: Animate counter on document scroll

script.js

// statistics counter animation
var counterFx = function counterFx(element) {
    var dfd = element.map(function(i, el) {
        var data = parseInt(this.dataset.value.replace(/[\.,]+/g, ''));
        var props = {
            "from": {
                "count": 0
            },
            "to": {
                "count": data
            }
        };
        return $(props.from).animate(props.to, {
            duration: 1000 * 3,
            step: function(now, counterFx) {
                $(el).text(Math.ceil(now));
            },
            complete: function() {
                if (el.dataset.sym !== undefined) {
                    el.textContent = el.textContent.concat(el.dataset.sym)
                }
            }
        }).promise();
    }).toArray();
    // return jQuery promise when all animations complete
    return $.when.apply($, dfd);
};

var counterFxReset = function counterFxReset(el) {
    // do stuff when window `.scrollTop()` > el
    $that = $(this);
    console.log('scrollTop', $that.scrollTop());
    $(el).each(function(i, v) {
        console.log('v', $(v).offset().top);
        console.log('scroll', ($that.scrollTop() + $that.height()));
        if (($that.scrollTop() + $that.height()) > $(v).offset().top) {
            // turn off scroll event so `counterFx` not called
            // during ongoing animation
            $that.off("scroll");
            // when all animations complete
            counterFx($(v));
        }
    })
};
// if `counterFx` should only be called once ,
// change `.on()` to `.one()` ,
// remove `.then()` callback following `counterFx()`
// within `counterFxReset`
$(window).on("scroll", function() {
    counterFxReset($('.statistics .counter'))
});