我构建了这个数字计数器脚本,当它们在视口中时,它会将数字计算到目标。不幸的是,由于某种原因,他们也被倒计时了。
$(window).scroll(function(){
// This is then function used to detect if the element is scrolled into view
function elementScrolled(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
// This is where we use the function to detect if ".numbers" is scrolled into view
if(elementScrolled('.numbers')) {
$('.arv').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'linear',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
这里是JSFiddle:http://jsfiddle.net/tw6g2oeu/325/
我怎么能阻止该功能倒计时?
修改
使用jQuery Waypoints插件结束:
jQuery('.numbers').waypoint(function() {
$('.arv').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'linear',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
this.destroy()
},{offset:'75%'});
this.destroy();方法可以防止它多次触发。
答案 0 :(得分:1)
因为您添加了jQuery标记。你可以使用jQuery waypoint插件。它会为你完成这项工作。
<强> USAGE:强>
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.'); \\ increment your counter here
});