我有一个网站上有一些事实计数器，但是我注意到当我在手机或浏览器上的移动视图上进行测试时，这些计数器不起作用。
我正在使用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>
答案 0 :(得分：0)
决定采用这种方法，似乎已经解决了我的问题。
//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>