jQuery - stop/cancel scroll event callback after a certain scroll position

Question

I want the number to count up to its designated value and stay there, but because the function gets called every time the page is being scrolled below a certain height, then it goes back to 1.

The solution would be to make it call the function only once when the page has been scrolled to below the certain height.

Ive tried placing the .one() method several places but that didn't help

http://jsfiddle.net/d7vKd/1543/

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $("#mydiv").position().top) {
    window.randomize = function() {
      $('.radial-progress1').attr('data-progress', Math.floor(94));
    };
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 6000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });
    setTimeout(window.randomize, 200);
  }
})

Have you considered $(document).off("scroll") when your trigger is met? — Niet the Dark Absol
– Niet the Dark Absol, Commented Aug 8, 2017 at 11:34
the $(document).off("scroll") conflicts because i have another on scroll function on my website(hide/show header navigation). do you know another solution — Vegapunk
– Vegapunk, Commented Aug 8, 2017 at 12:38

vsync · Accepted Answer · 2017-08-09 07:30:08Z

1

You should unbind your scroll event once the callback has met its demands:

$(document).on('scroll.someName', function(){
  var isPassedPos = $(this).scrollTop() >= $("#mydiv").position().top;

  if( isPassedPos ){
    $(document).off('scroll.someName') // <-------------- remove the event listener

    window.randomize = function() {
      $('.radial-progress1').attr('data-progress', Math.floor(94));
    };

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

    setTimeout(window.randomize, 200);
  }
})

edited Aug 9, 2017 at 7:30

answered Aug 8, 2017 at 11:40

vsync

133k61 gold badges345 silver badges430 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vegapunk Over a year ago

Oh no, that solution created another issue, can your solution be isolated somehow? because i have another $(document).scroll(function(){ on my website that gets broken now :)

Vegapunk Over a year ago

$(document).scroll(function(){ if ($(this).scrollTop() > 400) { $("#topnav").removeClass("transp").addClass('wtbck'); } else { $("#topnav").removeClass("wtbck").addClass('transp'); } });

vsync Over a year ago

@Vegapunk - sure. update the solution to use events namespace someName (choose your own), so the off method will only remove that specific event and not all the scroll event listeners.

Vegapunk Over a year ago

i changed document to window, fixed it for me, hope it wont cause any issues on the different platforms :)

vsync Over a year ago

@Vegapunk - it won't, but you should really use namespaces nonetheless. Any particular reason you have not chosen this answer as the correct one?

Collectives™ on Stack Overflow

jQuery - stop/cancel scroll event callback after a certain scroll position

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related