Question

我创建了一个网站并在我的代码中添加了一个计数器。

$(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>

现在我有一个问题，我想在我滚动到这个元素时反击开始

Demo

抱歉我的英文不好

Answer 1

您可以处理窗口scroll事件，并使用here给出的Scott Dowding函数来确定元素是否已滚动到视图中。可以在每个元素上设置isCounting标志，以防止同时计数几次。

在以下代码段中，仅在元素可见时执行计数。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Live Link

您可以使用此插件。来源LINK

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

注意： data-max='**'提供最大号码，data-delay='**'选择倒计时运行时间，然后选择增量data-increment="**"。

＆＃13;

/**
* 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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您需要提供目标元素和ID，然后从顶部var pos = document.getElementById('targetId').scrollHeight - element.clientHeight;获取其地址，并将其与滚动的高度window.pageYOffset进行比较。

如果寡妇偏移量大于pos，则可以启动计数器。您应该将比较挂钩到window.onscroll事件。

如果你已经启动了一个元素的计数器，你应该记住一个变量，以避免它开始两次。

Answer 4

获取滚动高度并与开始div的高度（计数开始div）进行比较放置条件

＆＃13;

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

＆＃13;

<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>

＆＃13;

滚动特定元素

4 个答案: