显示引导计数器启动

Question

所以我找到了这个代码笔教程，它帮助我在页面上获取数字计数器。它工作得很好，但是计数器位于页脚中，计数器实际上在页面加载时开始。因此，当您到达页面底部时，计数器动画已经发生。我将如何更改此 JavaScript，以便计数器在我达到上述目标div 或计数器div 之前不会启动。例如，假设我有

<div id="services">
    //Stuff Here
</div>
<div class="counter-wrap">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
                <p class="count-text ">SomeText GoesHere</p>
            </div>
            <div class="col-sm-4">
                <h2 class="timer count-title count-number" data-to="800" data-speed="1500"></h2>
                <p class="count-text ">SomeText GoesHere</p>
            </div>
            <div class="col-sm-4">
                <h2 class="timer count-title count-number" data-to="950" data-speed="1500"></h2>
                <p class="count-text ">SomeText GoesHere</p>
            </div>
        </div>
    </div>
</div>

因此，计数器动画应该开始，直到我点击"服务"id。.JS：

(function ($) {
    $.fn.countTo = function (options) {
        options = options || {};
        return $(this).each(function () {
            // set options for current element
            var settings = $.extend({}, $.fn.countTo.defaults, {
                from:            $(this).data('from'),
                to:              $(this).data('to'),
                speed:           $(this).data('speed'),
                refreshInterval: $(this).data('refresh-interval'),
                decimals:        $(this).data('decimals')
            }, options);
            // how many times to update the value, and how much to increment the value on each update
            var loops = Math.ceil(settings.speed / settings.refreshInterval),
                increment = (settings.to - settings.from) / loops;
            // references & variables that will change with each update
            var self = this,
                $self = $(this),
                loopCount = 0,
                value = settings.from,
                data = $self.data('countTo') || {};
            $self.data('countTo', data);
            // if an existing interval can be found, clear it first
            if (data.interval) {
                clearInterval(data.interval);
            }
            data.interval = setInterval(updateTimer, settings.refreshInterval);
            // initialize the element with the starting value
            render(value);
            function updateTimer() {
                value += increment;
                loopCount++;
                render(value);
                if (typeof(settings.onUpdate) == 'function') {
                    settings.onUpdate.call(self, value);
                }
                if (loopCount >= loops) {
                    // remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;
                    if (typeof(settings.onComplete) == 'function') {
                        settings.onComplete.call(self, value);
                    }
                }
            }
            function render(value) {
                var formattedValue = settings.formatter.call(self, value, settings);
                $self.html(formattedValue);
            }
        });
    };
    $.fn.countTo.defaults = {
        from: 0,               // the number the element should start at
        to: 0,                 // the number the element should end at
        speed: 1000,           // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,           // the number of decimal places to show
        formatter: formatter,  // handler for formatting the value before rendering
        onUpdate: null,        // callback method for every time the element is updated
        onComplete: null       // callback method for when the element finishes updating
    };
    function formatter(value, settings) {
        return value.toFixed(settings.decimals);
    }
}(jQuery));
jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/B(?=(?:d{3})+(?!d))/g, ',');
    }
  });
  // start all the timers
  $('.timer').each(count);  
  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});

代码笔示例：http://codepen.io/syedrafeeq/pen/rcfsJ

Answer 1

你可以用这个检查元素在视口中是否可见：

$.fn.isOnScreen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

然后像这样在滚动时启动计时器：

$(document).on( 'scroll', function(){
  $('.timer').each(count).isOnScreen(); 
});

像这样的东西：https://jsfiddle.net/snb7be2c/

我设置了新的<div>并添加了一些 css，因此它在页脚中。

更新

仅运行一次动画：https://jsfiddle.net/_jakob/snb7be2c/1/