【发布时间】：2017-06-02 08:32:10
【问题描述】：
我的网站上有 2 个计数器，当我加载我的页面时它们会计数。但是当我的屏幕宽度低于 800 像素时。当我加载页面时，它们不会自动启动。
但是，如果我快速滚动到它们所在的位置。他们开始了。全屏它们也可以正常工作。在移动设备上它们也可以工作。
这里是jquery代码：
if (jQuery('.shortcode_counter').size() > 0) {
if (jQuery(window).width() > 760) {
jQuery('.shortcode_counter').each(function(){
if (jQuery(this).offset().top < jQuery(window).height()) {
if (!jQuery(this).hasClass('done')) {
var set_count = jQuery(this).find('.stat_count').attr('data-count');
jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
var data = Math.floor(now);
jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
}
});
jQuery(this).addClass('done');
jQuery(this).find('.stat_count');
}
} else {
jQuery(this).waypoint(function(){
if (!jQuery(this).hasClass('done')) {
var set_count = jQuery(this).find('.stat_count').attr('data-count');
jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) {
var data = Math.floor(now);
jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data);
}
});
jQuery(this).addClass('done');
jQuery(this).find('.stat_count');
}
},{offset: 'bottom-in-view'});
}
});
}
}
我不擅长 jquery。这是我尝试过的jquery代码：
-
if (jQuery(window).width() > 760) {到if (jQuery(window).width() > 0) {因为可能是最小屏幕宽度？ -
if (!jQuery(this).hasClass('done')) {刚刚完全删除了这个 if 语句。因为我认为它确实应用了课程或其他东西。
这是 HTML：
<div class="row">
<div class="col-sm-6 module_number_5 module_cont pb50 module_counter">
<div class="module_content shortcode_counter breedte-100">
<div class="counter_wrapper">
<div class="counter_content">
<div class="stat_count_wrapper">
<h1 class="stat_count speciale-grote-counter" data-count="{{ records[1].number }}">0</h1>
</div>
<div class="counter_body">
<h5 class="counter_title speciale-grote-counter-text">{{ records[1].year }}</h5>
<div class="stat_temp"></div>
</div>
</div>
</div>
</div>
</div>
我对此一无所知。所以我想把它贴在这里。与此同时，我正在努力解决这个问题。
所以如果有人知道这个问题的解决方案。请。
提前致谢！编码愉快。
附加：
JSFIDDLE 添加了工作 jsfiddle。问题是。我的错误仅在计数器最初不在屏幕中时发生。并且宽度小于 800 像素。而在 JSFIDDLE 中它总是在屏幕上，对吧？
附加 2：
我发现了它的这一行。 ：
jQuery(this).waypoint(function(){
},{offset: 'bottom-in-view'});
附加 3：
显然，我发现的其他行是问题所在。我已将其放在下面的答案中，但也将其包括在此处：
已删除：
jQuery(this).waypoint(function(){
},{offset: 'bottom-in-view'});
现在可以正常工作了。
【问题讨论】：
-
你能提供一个工作的 FIDDLE 吗？
-
我试试。等我一下。 @DavidHope
-
@DavidHope 添加了 jsfiddle
标签： javascript jquery html css counter