I am currently working on a project where I need to create a counter that triggers at a specific scroll value. Essentially, I want users to see animated numbers incrementing from 0 to a pre-defined number once they reach a certain point while scrolling.
Here is the progress I have made so far:
$(document).scroll(function(){
var _scrollTop = $(document).scrollTop();
if(_scrollTop >= 1490){
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 3000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter)).stop();
}
});
});
}
});
However, the numbers keep refreshing every time I scroll beyond that value. My intention was for the animation to occur only once when the user scrolls past the specified value and then remain at that value in the HTML. Any assistance with this issue would be greatly appreciated.