divビューでJQuery関数を実行

Question

'about' divが表示されているときに、このjQueryをどのようにアクティブにするのだろうか。 、またはdivにスクロールすると

(function($) { 
    $.fn.countTo = function(options) { 
    options = options || {}; 

    return $(this).each(function() { 

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


     var loops = Math.ceil(settings.speed/settings.refreshInterval), 
     increment = (settings.to - settings.from)/loops; 


     var self = this, 
     $self = $(this), 
     loopCount = 0, 
     value = settings.from, 
     data = $self.data('countTo') || {}; 

     $self.data('countTo', data); 


     if (data.interval) { 
     clearInterval(data.interval); 
     } 
     data.interval = setInterval(updateTimer, settings.refreshInterval); 


     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, 
    to: 0, 
    speed: 1000, 
    refreshInterval: 100, 
    decimals: 0, 
    formatter: formatter, 
    onUpdate: null, 
    onComplete: null 
    }; 

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


    $('.timer').each(count); 

    function count(options) { 
    var $this = $(this); 
    options = $.extend({}, options || {}, $this.data('countToOptions') || {}); 
    $this.countTo(options); 
    } 
    $(function() { 
    $('div[onload]').trigger('onload'); 
    }); 
}); 

Answer 1

コードを非匿名関数として設定し、jQueryのWaypointsプラグインを使用して関数をトリガすることができます。

プラグインを使用しない場合は、$(window).scroll()の内部で関数をトリガーして計算を行うことができます。最初にこの行をコメントしてください：$('.timer').each(count);。あなたはこのように、スクロールチェッカ内でその行をラップされます：

//listening scrolling action 

$(window).scroll(function() { 
    var div_start = $("#about-row-b").offset().top; 
    var div_final = $("#about-row-b").offset().top + $("#about-row-b").outerHeight(); 
    var viewport_end = $(window).scrollTop() + $(window).height(); 

    if((viewport_end > div_start) && (viewport_end < div_final)){ 
     // v v v call your function here!!! 
     $('.timer').each(count); 
    } 
}); 

あなたがBenjamin Intal's Counter Up jQuery pluginを点検したいと思うかもしれない上がって数字上だけ興味がある場合。