Increasing numbers when the section is displayed

Question

I would like to start functions with increasing number, when the sections in displayed. I have a java script code:

$(function () {
    var fx = function fx() {
        $(".stat-number").each(function (i, el) {
            var data = parseInt(this.dataset.n, 10);
            var props = {
                "from": {
                    "count": 0
                },
                "to": { 
                    "count": data
                }
            };
            $(props.from).animate(props.to, {
                duration: 1000 * 1,
                step: function (now, fx) {
                    $(el).text(Math.ceil(now));
                },
                complete:function() {
                    if (el.dataset.sym !== undefined) {
                        el.textContent = el.textContent.concat(el.dataset.sym)
                    }
                }
            });
        });
    };

    var reset = function reset() {
        //console.log($(this).scrollTop())
        if ($(this).scrollTop() > 90) {
            $(this).off("scroll");
            fx()
        }
    };

    $(window).on("scroll", reset);
});

I cannot cope with displaying this function at the right moment. Thank you for your help.

No. I would like to increase when div show on monitor. Example, user scroll page, when show on section with number, my funcion increase number in div. — gsskrzysztof, Dec 28 '20 at 10:32
Maybe this will help you, this you can use to detect if its in viewport and the if it is the case you can call the function https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 — Aalexander, Dec 28 '20 at 10:51

Increasing numbers when the section is displayed

0 Answers0