Question

我正在创建一个页面模板。我创建了一个计数部分。我想在屏幕上显示countup部分时显示计数动画。这意味着，当滚动点到达countup部分时，动画将开始。

激活脚本

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

请帮帮我。

Answer 1

您将观看窗口滚动事件（为性能而去抖动）以及滚动到元素的距离是否为＆lt; 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);

当达到countup div中的滚动点时，将开始计数

1 个答案: