title: How do I modify this jQuery script that counts number to count only when the user scrolls down to it?
body: <p>I stumbled across this snippet that counts for a website up to a number in jQuery <a href="http://codepen.io/syedrafeeq/pen/rcfsJ" rel="nofollow noreferrer">here</a>.</p>
  
  <p>How would I modify it to wait to start counting until the user scrolls down to the class "counter col_fourth" or another class?</p>
  
  <p>I know I need to use the scroll class, but I'm not sure how to do that.</p>
  
  <p>I'm thinking about using something similar to <a href="https://stackoverflow.com/questions/33138454/jquery-how-do-i-get-my-counter-to-load-only-when-in-view">jQuery - How do I get my counter to load only when in view?</a></p>
  
  <p>// Created by Sayed Rafeeq </p>
  
  <pre><code>(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 &amp; 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 &gt;= 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);
    }
  });
  </code></pre>