JQuery 事实计数器在移动视图上不起作用

Question

我有一个网站，上面有一些事实计数器，但我注意到当我在手机上测试或在浏览器上的移动视图上测试时，计数器不起作用。

我正在使用Jquery CountTo插件。几天来一直试图让它工作。任何建议将不胜感激。

插件 - https://github.com/mhuggins/jquery-countTo

//CountTo function 
function factCounter() {
if ($('.fact-counter').length) {
$('.fact-counter .counter-column.animated').each(function() {

var $t = $(this),
n = $t.find(".count-text").attr("data-stop"),
r = parseInt($t.find(".count-text").attr("data-speed"), 10);

if (!$t.hasClass("counted")) {
$t.addClass("counted");
$({
countNum: $t.find(".count-text").text()
}).animate({
countNum: n
}, {
duration: r,
easing: "linear",
step: function() {
$t.find(".count-text").text(Math.floor(this.countNum));
},
complete: function() {
$t.find(".count-text").text(this.countNum);
}
});
}
});
}
}



//Call to function
$(window).scroll('scroll', function() { 
(function($) {
factCounter();
})(jQuery);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
<section class="fact-counter" style="background: url(images/resource/1.jpg);">
<div class="container">
<div class="row clearfix">
<div class="counter-outer clearfix">
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-star"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-stop="100">0</span><span>+</span></div>
<h4 class="counter-title">Site Inspections</h4>
</div>
</div>
</article>
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-people"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-stop="3">0</span></div>
<h4 class="counter-title">Qualified Staff</h4>
</div>
</div>
</article>
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-interface"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-stop="100">0</span><span>+</span></div>
<h4 class="counter-title">Project's Done</h4>
</div>
</div>
</article>
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-trophy"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-stop="250">0</span><span>+</span></div>
<h4 class="counter-title">Happy Clients</h4>
</div>
</div>
</article>
</div>
</div>
</div>
</section>

Answer 1

决定采用这种方法，似乎已经解决了我的问题。

//Facts Counter (Redone)
function isScrolledIntoView(el) {
	var elemTop = el.getBoundingClientRect().top;
	var elemBottom = el.getBoundingClientRect().bottom;
	var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
	return isVisible;
}
$(window).on('scroll', function() {
	if (isScrolledIntoView(document.getElementById('counter'))) {
		$('.count-text').countTo();
		// Unbind scroll event
		$(window).off('scroll');
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
<section id="counter" class="fact-counter" style="background: url(images/resource/1.jpg);">
<div class="container">
<div class="row clearfix">
<div class="counter-outer clearfix">
<!--Column-->
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-star"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="100">0</span><span>+</span></div>
<h4 class="counter-title">Site Inspections</h4>
</div>
</div>
</article>
<!--Column-->
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-people"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="3">0</span></div>
<h4 class="counter-title">Qualified Staff</h4>
</div>
</div>
</article>
<!--Column-->
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-interface"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="100">0</span><span>+</span></div>
<h4 class="counter-title">Project's Done</h4>
</div>
</div>
</article>
<!--Column-->
<article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
<div class="item clearfix">
<div class="icon-box">
<i class="flaticon-trophy"></i>
</div>
<div class="content-text">
<div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="250">0</span><span>+</span></div>
<h4 class="counter-title">Happy Clients</h4>
</div>
</div>
</article>
</div>
</div>
</div>
</section>