Start counting after scroll on specific element

Question

I create a website and add a counter to my codes.

$(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        $this.html(++current);
        if(current !== $this.data('count')){
            setTimeout(function(){count($this)}, 50);
        }
    }        
  $(".c-section4").each(function() {
      $(this).data('count', parseInt($(this).html(), 10));
      $(this).html('0');
      count($(this));
  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="section4">
<div class="section4-bg"></div>

<div class="counter-section">
<span class="c-section4">152 </span>
<h3> کارکنان ما </h3>
</div>

<div class="counter-section">
<span class="c-section4">152 </span>
<h3> کارکنان ما </h3>
</div>

<div class="counter-section">
<span class="c-section4">152 </span>
<h3> کارکنان ما </h3>
</div>

</div>

Now i have a problem, i want to counter start when i scroll to this element

Demo

Sorry for my bad english

Answer 1

You can handle the window scroll event and use the function given here by Scott Dowding to determine if the element has been scrolled into view. An isCounting flag can be set on each element to prevent counting several times simultaneously.

In the following code snippet, the counting is performed only while the element is visible.

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

    function count($this) {
        var current = parseInt($this.html(), 10);
        if (isScrolledIntoView($this) && !$this.data("isCounting") && current < $this.data('count')) {
            $this.html(++current);
            $this.data("isCounting", true);
            setTimeout(function () {
                $this.data("isCounting", false);
                count($this);
            }, 50);
        }
    }

    $(".c-section4").each(function () {
        $(this).data('count', parseInt($(this).html(), 10));
        $(this).html('0');
        $(this).data("isCounting", false);
    });

    function startCount() {
        $(".c-section4").each(function () {
            count($(this));
        });
    };

    $(window).scroll(function () {
        startCount();
    });

    startCount();
});

.tallDiv 
{
   height: 800px;
   background-color: silver;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="section4">
  <div class="section4-bg"></div>
  <div class="tallDiv">Scroll down to test</div>
  <div class="counter-section">
    <span class="c-section4">152 </span>
    <h3> کارکنان ما </h3>
  </div>
  <div class="counter-section">
    <span class="c-section4">152 </span>
    <h3> کارکنان ما </h3>
  </div>
  <div class="counter-section">
    <span class="c-section4">152 </span>
    <h3> کارکنان ما </h3>
  </div>
  <div class="tallDiv"></div>
</div>

Answer 2

You need to give the target element and id, then get its postition from top var pos = document.getElementById('targetId').scrollHeight - element.clientHeight; and compare it to the scrolled height window.pageYOffset.

If widow offset is greater than the pos, you can start the counter. You should hook the comparison to the window.onscroll event.

Also you should memorize in a variable if you started the counter for an element already to avoid starting it twice.

Answer 3

Get the scroll Height and compare with the height of the start div(count start div) put a condition

$(function() {
  var pos = document.getElementById('targetId').scrollHeight;
  console.log(pos);
  
  if(pos>="75"){
  
    function count($this){
        var current = parseInt($this.html(), 10);
        $this.html(++current);
        if(current !== $this.data('count')){
            setTimeout(function(){count($this)}, 50);
        }
    }        
  $(".c-section4").each(function() {
      $(this).data('count', parseInt($(this).html(), 10));
      $(this).html('0');
      count($(this));
  });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="counter-section" id="targetId">
<span class="c-section4">152 </span>
<h3> کارکنان ما </h3>
</div>