【发布时间】：2017-11-17 17:52:49
【问题描述】：
我已经设法让一个简单的统计计数器从零运行到给定值，它只在页面滚动时激活，但这并不完全符合我的目标。
问题是，所有的“.counter”元素都会在第一个元素出现时同时触发，而不是等到每个单独的元素在屏幕上真正可见。因此，一旦窗口点击包含 div，它们就会立即关闭。
我想让每个单独的 .counter 等到它完全可见后再触发。
这是我目前所得到的：
HTML：
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="stats">
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="400"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="350"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="12"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="97"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="899"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="4"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="0"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="6"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
</div>
还有 jQuery...
(function($) {
$(function() {
var $counters = $('.counter'); //contains all elements of counter class
var $window = $(window);
$window.on('scroll', function(e) {
$counters.each(function(i, elem) { //loop through each element
if ($(this).hasClass('counted')) // check if already animated
return;
animateCounter($(this));
});
});
});
function animateCounter(elem) {
var winTop = $(window).scrollTop(); // calculate distance from top of window
var winBottom = winTop + $(window).height();
var elemTop = $(elem).offset().top; // element distance from top of page
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
$('.counter').each(function() {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.attr('count')
}, {
duration: 3000,
step: function() {
$this.text(Math.ceil(this.Counter));
}
});
$this.removeClass('counter').addClass('counted');
});
}
}
})(jQuery);
在这里提琴： https://jsfiddle.net/ahfL4jxr/11/
提前致谢。
【问题讨论】：
-
问题是（我认为）
$(this)是所有.counter元素，并且由于它是一个类选择器，因此它将为所有人运行。我会尝试一下，看看我能不能解决它。 -
字面意思是一个变化:)。已在我的回答中修复
标签： javascript jquery html css