run jQuery number counter on scroll

Question

I have a jQuery number counter that works great but it runs as soon as the page loads. What I am trying to do is work out how to get it to run when the element come into view? This is my current markup

EDIT

Got the desired effect using waypoints. Updated jQuery below

   $('#counter').waypoint(function (direction) {
    $('.count').each(function () {
      var $this = $(this);
      jQuery({
        Counter: 0
      }).animate({
        Counter: $this.text()
      }, {
        duration: 2000,
        easing: 'swing',
        step: function () {
          $this.text(Math.ceil(this.Counter));
        }
      });
    });
  }, {
    offset: '80%'
  });

 #counter {
      position: relative;
      color: #fff;
      margin-top: 600px;
    }
    
    .counters {
      padding: 100px 0;
      width: 33.333%;
      float: left;
    }
    
    #counter-1 {
      background: #393939;
    }
    
    #counter-2 {
      background: #494949;
    }
    
    #counter-3 {
      background: #595959;
    }
    
    .line-numbers {
      text-align: center;
      display: block;
      font-size: 55px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="counter">
        <div id="counter-1" class="counters">
          <span class="line-numbers count">2000</span>
        </div>
        <div id="counter-2" class="counters">
          <span class="line-numbers count">2500</span>
        </div>
        <div id="counter-3" class="counters">
          <span class="line-numbers count">150</span>
        </div>
      </section>

Possible duplicate of [Triggering jquery event when an element appears on screen](http://stackoverflow.com/questions/3045852/triggering-jquery-event-when-an-element-appears-on-screen) — Paul Roub, May 09 '17 at 14:23
Thanks for the link that question helped me answer my query. A simple waypoint sorted it. Have added my new markup to the original post. — rufus, May 09 '17 at 14:30
Great, but please don't edit answers into your questions. Either add the corrected code as an actual answer or (probably best here) [accept the duplicate](https://meta.stackexchange.com/questions/250922/can-we-clarify-to-the-op-that-their-question-is-not-yet-closed-and-the-duplicate/250930#250930). — Paul Roub, May 09 '17 at 14:40

score 1 · Accepted Answer · edited May 23 '17 at 11:54

1

You can use this function

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

As show on this answer

edited May 23 '17 at 11:54

Community

1
1

answered May 09 '17 at 14:22

Pedro Henrique

591
5
16

Please don't answer questions with a copied answer from a duplicate. Instead, flag the question as a duplicate of the question where you found the answer. – Heretic Monkey May 09 '17 at 15:53
I did not know I could flag already, but in this case I think the questions are not exactly the same as the OP on the other question is working with Ajax and here the OP is not – Pedro Henrique May 09 '17 at 17:27

run jQuery number counter on scroll

1 Answers1