Start counting after scrolling through a specific item

Question

I create a site and add a code counter.

$(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 meet the launch when I scroll this element

Demo

Sorry for my bad english

Answer 1

You can handle the scroll event of a window and use the function mentioned here by Scott Downing to determine if the item has been scrolled into view. The isCounting flag can be set for each item to prevent counting several times at once.

In the following code snippet, counting is performed only when 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

Live link

You can use this plugin for it. LINK Source

 <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='**' specify the maximum number and data-delay='**' select the time for the countdown 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> 

Answer 3

You need to specify the target element and id, and then get its postulation on top var pos = document.getElementById('targetId').scrollHeight - element.clientHeight; and compare it with the window.pageYOffset height of window.pageYOffset .

If the widow's offset is greater than pos, you can start the counter. You must bind the comparison to the window.onscroll event.

You should also remember in the variable if you started the counter so that the element no longer starts it twice.

Answer 4

Get the scroll height and compare it with the height of the starting div (the origin of the origin) to set the 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> 

Answer 5

For those who are looking to restart the timer each time, leaving the item on the screen, you can try using else if, after checking the scroll of the item in the view (in function count($this) ):

 if (isScrolledIntoView($this) && !$this.data("isCounting") && current < $this.data('count')) { // Stuff } else if ( !isScrolledIntoView($this) ) { $this.html('0'); } 

Thanks for the best answer!