Я хочу, чтобы счетчик запускался, когда я добираюсь до него во время прокрутки страницы. Я использую тот же код, что и на Codepen, я проверил, есть ли какие-то проблемы в html, но ничего не нашел. Я также искал похожие проблемы на форуме, но не нашел ничего, в чем я мог бы добиться успеха.
В основном счетчик работает правильно только при первой прокрутке страницы, если страница перезагружается (проверено в Firefox и Chrome) счетчик не запускается, он начинается только с Firefox, если после перезагрузки страницы вместо перезапуска с верха страницы в окне уже отображается счетчик внизу страницы.
Это код, где я мог ошибиться?
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
body {
background-color: black;
color: white;
height: 100vh;
box-sizing: border-box;
}
#counters {
font-family: 'Space Mono', monospace;
font-size: 4rem;
font-weight: 700;
}
#counter {
position:relative;
font-family: 'Space Mono', monospace;
font-size: 4rem;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Through Fear</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<section class="children">
<div class="row break"> </div>
<div class="row"><div class="three columns">s</div>
<div class="six columns longtextsonblack">
<p>sss<br>
sss</p></div>
<div class="three columns">s</div>
</div>
</section>
<section class="children">
<div class="row break"> </div>
<div class="row"><div class="three columns">s</div>
<div class="six columns longtextsonblack">
<p>
sss</p></div>
<div class="three columns">s</div>
</div>
</section>
<section class="children"><div class="row break"> </div><div class="row"><div class="one column">s</div>
<div class="one column">s</div>
<div class="one column testiVerticali"><p>Fatturato</p></div>
<div class="six columns longtextsonblack translate">
<p>
sss</p>
<p>
sss</p></div>
<div class="three columns">s</div>
<div class="row">
<div class="one column centocinquanta">€</div>
<!--
<div id="counters" class="eight columns"><div class="counter"data-target="150000000000">0
</div>
</div>
-->
<div id="counter" class="eight columns counter-value" data-count="150000000">0
</div>
<div class="two columns">s</div>
</div>
</div>
</section>
<div class="row"><div class="three columns">s</div>
<div class="six columns longtextsonblack">
<p>
sss</p></div>
<div class="three columns">s</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/index.js" type="module"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="/js/jquery.waypoints.min.js"></script>
</body>
</html>