title: Fire event after scrolling to a specific div or id
body: <p>I've searched a lot these days but i didn't manage to solve my problem. </p>
  
  <p>I have the script below which is a simple counter, that counts some stats starting from 0. It starts when my page loads. I would like to fire this event when i scroll to a specific div or id, but only once. I saw a lot examples with .one() method etc. but i didn't find out the proper solution. </p>
  
  <p>Here is my script. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $.fn.jQuerySimpleCounter = function( options ) {
          var settings = $.extend({
          start:  0,
          end:    100,
          easing: 'swing',
          duration: 500,
          complete: ''
      }, options );
  
      var thisElement = $(this);
  
      $({count: settings.start}).animate({count: settings.end}, {
          duration: settings.duration,
          easing: settings.easing,
          step: function() {
              var mathCount = Math.ceil(this.count);
              thisElement.text(mathCount);
          },
          complete: settings.complete
      });
  };
  
  $('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
  $('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
  $('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
  $('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
  
  &lt;/script&gt;
  </code></pre>
  
  <p>So what should i add to trigger it after reaching a certain div or id...? </p>