Make jquery counter start on scroll

Question

I have this counter and it works good, but my problem is how to make it starts only when i scroll on that place on the website where it is. Now he is over even before website was full loaded.

I tried some like this, but i don't have enough knowledge for javascript to do this alone.

$(window).scroll(function() {    
    var scroll = $(window).();
    if (scroll >= 1) {
        ;
    } else {
       ;
    }
});

Any solution for this problem?

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

.col_half {
  width: 49%;
}

.col_third {
  width: 32%;
}

.col_fourth {
  width: 17.5%;
}

.col_fifth {
  width: 18.4%;
}

.col_sixth {
  width: 15%;
}

.col_three_fourth {
  width: 74.5%;
}

.col_twothird {
  width: 66%;
}

.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}


/* Column Grids End */

.wrapper {
  margin: 30px auto;
  position: relative;
}

.counter {
  padding: 20px 0;
  border-radius: 5px;
}

.count-title {
  font-size: 40px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  color: black;
}

.count-text {
  font-size: 13px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  color: black;
}

.fa-2x {
  margin: 0 auto;
  float: none;
  display: table;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="counter col_fourth">
    <i class="fa fa-code fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="300" data-speed="15000"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>

  <div class="counter col_fourth">
    <i class="fa fa-coffee fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>



  <div class="counter col_fourth end">
    <i class="fa fa-bug fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>
</div>

Answer 1

On scroll, you have to compare the position of you timers in the page with the scrolled amount plus the window's height. That's when the timers come into view...

// start all the timers
var timerRan = false;
$(window).on("scroll", function(){
  if( ($(window).scrollTop() + $(window).height() > $(".wrapper").position().top) && !timerRan ){
    $('.timer').each(count);
    timerRan = true;
  }
});

And there's a "flag" to ensure the timers are started only once...

In the snippet below, I simply added a "spacer" div to have the demo scrollable...

(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
  var timerRan = false;
  $(window).on("scroll", function(){
    if( ($(window).scrollTop() + $(window).height() > $(".wrapper").position().top) && !timerRan ){
      $('.timer').each(count);
      timerRan = true;
    }
  });

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

.spacer{  /* Just for the demo */
  height:1000px;
}


.col_half {
  width: 49%;
}

.col_third {
  width: 32%;
}

.col_fourth {
  width: 17.5%;
}

.col_fifth {
  width: 18.4%;
}

.col_sixth {
  width: 15%;
}

.col_three_fourth {
  width: 74.5%;
}

.col_twothird {
  width: 66%;
}

.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}


/* Column Grids End */

.wrapper {
  margin: 30px auto;
  position: relative;
}

.counter {
  padding: 20px 0;
  border-radius: 5px;
}

.count-title {
  font-size: 40px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  color: black;
}

.count-text {
  font-size: 13px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  color: black;
}

.fa-2x {
  margin: 0 auto;
  float: none;
  display: table;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="spacer"></div> <!-- Just for the demo -->

<div class="wrapper">
  <div class="counter col_fourth">
    <i class="fa fa-code fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="300" data-speed="15000"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>

  <div class="counter col_fourth">
    <i class="fa fa-coffee fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>



  <div class="counter col_fourth end">
    <i class="fa fa-bug fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>
</div>