Start incrementcounter when the element is in viewport

[Michaelben92]

Hi,

I try to start the counter only when the user sees the counter on the viewport, it looks like this :

$(window).scroll(function() {
                $(".incremental-counter").each(function() {
                    if (isScrolledIntoView(this) === true) {
                        $(this).incrementalCounter();
                    }
                });

with the function :

function isScrolledIntoView(elem) {
                var height = $(window).height()
                var docViewTop = $(window).scrollTop();
                return docViewTop / height >= 0.11;
            }

where 0.11 is the value where I want to trigger the counter.

But it's not working, I got a million digits .....

can someone help me? thanks

[Sepremex]

@Michaelben92 hi, put that on a function... I'm using WayPoint JS to show X element only when in viewport

var wayp = new Waypoint({
        element: document.getElementById('_cct'),
        handler: function () {
            animateNumero();
        },
        offset: '60%'
    });
 function animateNumero() {
        $('.incremental-counter').html('');
        $(".incremental-counter").incrementalCounter();
    }

There is one thing I can't figure it out, when user scroll down it all works fine but when user goes up it doesn't reset the counter it adds to it, that is why I have the html('');

[Sepremex]

lol, just fixed, I only had to add the this.distroy();to the waypoint right after my function and thats it! it works!

[Michaelben92]

Hi,

Thanks a lot for your answer, I'll try this

Best regards

Le mer. 19 févr. 2020 à 04:24, Sepremex notifications@github.com a écrit :

@Michaelben92 https://github.com/Michaelben92 hi, put that on a function... I'm using WayPoint JS to show X element only when in viewport

var wayp = new Waypoint({ element: document.getElementById('_cct'), handler: function () { animateNumero(); }, offset: '60%' }); function animateNumero() { $('.incremental-counter').html(''); $(".incremental-counter").incrementalCounter(); }

There is one thing I can't figure it out, when user scroll down it all works fine but when user goes up it doesn't reset the counter it adds to it, that is why I have the html('');

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MikhaelGerbet/jquery-incremental-counter/issues/3?email_source=notifications&email_token=ALHE62657RG2ST2DZOBLDYDRDSJ7VA5CNFSM4KTB7RAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMGDIRI#issuecomment-588002373, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALHE62YVWCO3RDJ4IBHCOKLRDSJ7VANCNFSM4KTB7RAA .