当到达计数分区中的滚动点时，将开始计数

Countup will be start when reached scroll point in countup div

本文关键字：开始 滚动 分区      更新时间：2023-09-26

我正在创建一个页面模板。我创建了一个倒计时部分。当在屏幕上显示倒计时部分时，我想显示倒计时动画。也就是说，当滚动点到达倒数部分时，动画将开始。

激活脚本

$('.count').jQuerySimpleCounter({
    start:  0,
    end:10,
    duration: 10000
});

请帮帮我。

您将观看窗口滚动事件（为了性能而取消抖动），并且当滚动到元素的距离为<X像素量触发您的动画

(function($, window){
    var $window = $(window);
    var $countupSection = $('.countup-section');
    var countupTop = $countupSection.offset().top;
    var debounce = function(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };
    var checkPosition = function(){
        var scrollTop = $window.scrollTop();
        if(scrollTop - countupTop < 20){
            //unbind the event so animation triggers only once
            $window.off('scroll', debouncedScroll);
            $('.count').jQuerySimpleCounter({
                start:  0,
                end:10,
                duration: 10000
            });
        }
    };
    var debouncedScroll = debounce(checkPosition, 50);
    $window.on('scroll', debouncedScroll);
})(jQuery, window);
相关文章：