Tenho o seguinte problema, preciso ativar um contador quando o usuário rolar o scroll até a div onde se encontra os números, porém no meu código o contador funciona e depois parece que ativa novamente a função, tentei usar um preventDefault() dentro do complete porém ele me retorna undefined.
Segue abaixo um exemplo do meu código:
function ativaContador(e){
$('.contador').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now)+'%');
},
complete: function(){
},
});
});
}
$(window).scroll(function(e) {
var alturaBody = $(window).height();
var distanciaElemento = $('.contador').offset().top;
var posicaoScroll = $(this).scrollTop();
var alturaElemento = $('.contador').outerHeight();
if (posicaoScroll > (distanciaElemento+alturaElemento-alturaBody)){
ativaContador();
}
});
.bloco{
height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bloco"></div>
<div class="contador">100</div>