Question

我对javascript完全陌生。我试图执行一个计数脚本，但我只想在你滚动到屏幕上的元素时启动它（所以你可以看到计数）。目前，我的代码目前仅适用于页面加载。有人能帮帮我吗？感谢。

这是html代码元素：<span class="count">100</span>

这是当前适用于页面加载的脚本：

$('.count').each(function () {
$(this).prop('Counter',0).animate({
    Counter: $(this).text()
}, {
    duration: 4000,
    easing: 'swing',
    step: function (now) {
        $(this).text(Math.ceil(now));
    }
});

}）;

Answer 1

您可以使用以下内容：

$element = $('.count');
$(window).scroll(function() {
   var hT = $element.offset().top,
       hH = $element.outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT + hH - wH)) {
       $element.each(function () {
       $(this).prop('Counter',0).animate({
           Counter: $(this).text()
           }, {
               duration: 4000,
               easing: 'swing',
               step: function (now) {
                   $(this).text(Math.ceil(now));
               }
           });
       });
   }
});

它的作用是验证当前滚动偏移量与页面中的元素偏移量。希望它有所帮助。

Answer 2

好的，我刚刚找到了别人做过的解决方案。我确信有一个更简单的脚本，但这个脚本就像一个魅力。我编辑了SPAN元素，如下所示： <span class="timer count-title count-number" data-to="100" data-speed="5000"></span>

然后我使用了@ Bootstrap counter start on display找到的更新的2月2日 javascript代码。希望这有助于其他人寻找滚动激活的计数器。

当元素滚动到网页上时执行计数器脚本

2 个答案: