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

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));
               }
           });
       });
   }
});

它所做的是根据页面中的元素偏移量验证当前滚动偏移量。希望对您有所帮助。