5

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

Jacopo Brovida
  • 425
  • 4
  • 10
Alireza Behnamnik
  • 144
  • 2
  • 14

4 Answers4

8

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>
Community
  • 1
  • 1
ConnorsFan
  • 58,595
  • 11
  • 85
  • 120
  • If I take one **15**, one **125** and one **5652** what is happen here ? It is going to take like a unlimited time. How we can solved it ? I already try to reduce by the time to 5s [LIVE_LINK](https://jsfiddle.net/ashikjs/4xoqrvx7/) – MD Ashik Nov 11 '16 at 02:17
  • Hello. How can I speed up this animation? What parameter defines how long this effect should continue? – Andrii Pryimak Feb 17 '18 at 11:10
  • @AndriiPryimak - In `function count($this) { ... }`, the timeout is set to 50 ms. You can speed up the animation by decreasing that timeout. The animation keeps going until it reaches the value set in the `span` elements (152 in the markup shown above); you can also change that value. – ConnorsFan Feb 17 '18 at 13:54
4

Live Link

You can use this Plugin for it. Source LINK

<span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0'
 data-max='82' data-delay='19' data-increment="2">0</span>

NB: data-max='**'give your max-number and data-delay='**' select a time for countdown running and select increment data-increment="**" .

/**
* jQuery scroroller Plugin 1.0
*
* http://www.tinywall.net/
* 
* Developers: Arun David, Boobalan
* Copyright (c) 2014 
*/
(function($){
    $(window).on("load",function(){
        $(document).scrollzipInit();
        $(document).rollerInit();
    });
    $(window).on("load scroll resize", function(){
        $('.numscroller').scrollzip({
            showFunction    :   function() {
                                    numberRoller($(this).attr('data-slno'));
                                },
            wholeVisible    :     false,
        });
    });
    $.fn.scrollzipInit=function(){
        $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>" );
    };
    $.fn.rollerInit=function(){
        var i=0;
        $('.numscroller').each(function() {
            i++;
           $(this).attr('data-slno',i); 
           $(this).addClass("roller-title-number-"+i);
        });        
    };
    $.fn.scrollzip = function(options){
        var settings = $.extend({
            showFunction    : null,
            hideFunction    : null,
            showShift       : 0,
            wholeVisible    : false,
            hideShift       : 0,
        }, options);
        return this.each(function(i,obj){
            $(this).addClass('scrollzip');
            if ( $.isFunction( settings.showFunction ) ){
                if(
                    !$(this).hasClass('isShown')&&
                    ($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
                ){
                    $(this).addClass('isShown');
                    settings.showFunction.call( this );
                }
            }
            if ( $.isFunction( settings.hideFunction ) ){
                if(
                    $(this).hasClass('isShown')&&
                    (($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.hideShift)<($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))||
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))>($(this).outerHeight()+$(this).offset().top-settings.hideShift))
                ){
                    $(this).removeClass('isShown');
                    settings.hideFunction.call( this );
                }
            }
            return this;
        });
    };
    function numberRoller(slno){
            var min=$('.roller-title-number-'+slno).attr('data-min');
            var max=$('.roller-title-number-'+slno).attr('data-max');
            var timediff=$('.roller-title-number-'+slno).attr('data-delay');
            var increment=$('.roller-title-number-'+slno).attr('data-increment');
            var numdiff=max-min;
            var timeout=(timediff*1000)/numdiff;
            //if(numinc<10){
                //increment=Math.floor((timediff*1000)/10);
            //}//alert(increment);
            numberRoll(slno,min,max,increment,timeout);
            
    }
    function numberRoll(slno,min,max,increment,timeout){//alert(slno+"="+min+"="+max+"="+increment+"="+timeout);
        if(min<=max){
            $('.roller-title-number-'+slno).html(min);
            min=parseInt(min)+parseInt(increment);
            setTimeout(function(){numberRoll(eval(slno),eval(min),eval(max),eval(increment),eval(timeout))},timeout);
        }else{
            $('.roller-title-number-'+slno).html(max);
        }
    }
})(jQuery);
.nm {
 height: 400px;
 background: #f5f5f5;
 display: block;
}
.nm_1 {
 background-color: #632525;
}
.nm_2 {
 background-color: grad;
}
.nm_3 {
 background-color: gray;
}
.nm_4 {
 background-color: green;
}
.nm_5 {
 background-color: georgian;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="nm nm_1">
</section>
<section class="nm nm_2">
</section>
<section class="nm nm_3">
</section>
<section class="nm nm_4">
 
 <div>
  <span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='192' data-delay='19' data-increment="2">0</span>
  <h3> کارکنان ما </h3>
 </div>
 <div>
  <span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='282' data-delay='19' data-increment="2">0</span>
  <h3> کارکنان ما </h3>
 </div>
 <div>
  <span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='82' data-delay='19' data-increment="2">0</span>
  <h3> کارکنان ما </h3>
 </div>
  
  
 
</section>
<section class="nm nm_4">
</section>
<section class="nm nm_5">
</section>
MD Ashik
  • 4,073
  • 1
  • 36
  • 41
3

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.

edlerd
  • 2,042
  • 1
  • 15
  • 22
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>
srinivas.ln
  • 324
  • 2
  • 6