我有一个jQuery数字计数器工作得很好,但它会在页面加载后立即运行。我想要做的是弄清楚当元素进入视图时如何让它运行?这是我目前的标记
修改
使用航点获得了预期的效果。更新了下面的jQuery
$('#counter').waypoint(function (direction) {
$('.count').each(function () {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}, {
offset: '80%'
});

#counter {
position: relative;
color: #fff;
margin-top: 600px;
}
.counters {
padding: 100px 0;
width: 33.333%;
float: left;
}
#counter-1 {
background: #393939;
}
#counter-2 {
background: #494949;
}
#counter-3 {
background: #595959;
}
.line-numbers {
text-align: center;
display: block;
font-size: 55px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="counter">
<div id="counter-1" class="counters">
<span class="line-numbers count">2000</span>
</div>
<div id="counter-2" class="counters">
<span class="line-numbers count">2500</span>
</div>
<div id="counter-3" class="counters">
<span class="line-numbers count">150</span>
</div>
</section>
&#13;
答案 0 :(得分:1)
您可以使用此功能
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
在this answer上显示