JSFiddle - React, Tailwind, and code Playground
HTML
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<span class="counter">99</span>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<span class="counter">55</span>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/>
<span class="counter">100</span>
JavaScript
function isElementVisible($elementToBeChecked)
{
var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $elementToBeChecked.offset().top;
var BotElement = TopElement + $elementToBeChecked.height();
return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(window).scroll(function () {
$( ".counter" ).each(function() {
$this = $(this);
isOnView = isElementVisible($(this));
if(isOnView && !$(this).hasClass('Starting')){
$(this).addClass('Starting');
startTimer($(this));
}
});
});
function startTimer($this) {
setTimeout(function(){
$this.html($this.html() - 1);
startTimer($this);
}, 1000);
}