Question

第一步

我想制作一个计数器，当用户加载我的页面时，计数器从0开始并以其结束值结束（例如75）。所以我从网上搜索并找到了一个jQuery代码，我复制了该代码并将其粘贴到我的js文件custom.js中，并根据需要进行了一些更改。它工作得很好。

这是我的代码：

HTML

<div class="top_div">
  Top Div
</div>
<div class="love_count">75%</div>
<div class="love_count">30%</div>

JS

jQuery(document).ready(function ($) {
function count($this){
  var current = parseInt($this.html(), 10);
  $this.html(++current + '%');
  if(current !== $this.data('count')){
    setTimeout(function(){count($this)}, 15);
  }
}

$(".love_count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
});
});

Demo

第二步

现在我的客户希望当用户向下滚动到这个特定的div时，计数器就会启动。所以我再次从网上搜索并找到了其他一些代码。但它不起作用。

首先当我向下滚动到该特定div时，计数器首先显示我的结束值（例如75）
秒然后从0开始，计数器永不停止。它成千上万，但永远不会停止。

这是我的代码：

HTML

<div class="top_div">
  Top Div
</div>
<div class="love_counter">
  <div class="love_count">75%</div>
  <div class="love_count">30%</div>
</div>

JS

$(window).scroll(function() {
    var hT = $('.love_counter').offset().top,
        hH = $('.love_counter').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        function count($this){
            var current = parseInt($this.html(), 10);
            $this.html(++current + '%');
            if(current !== $this.data('count')){
                setTimeout(function(){count($this)}, 15);
            }
        }

        $(".love_count").each(function() {
            $(this).data('count', parseInt($(this).html(), 10));
            $(this).html('0');
            count($(this));
        });
    }
});

Demo

我想要什么

所以我希望当网站向下滚动到该特定div时，计数器从0开始并停止在其结束值上。但是当我向上或向下滚动计数器时，不应该再次启动并仍然停在最终值。

但是当用户刷新页面并向下滚动到该特定div时，计数器将照常启动并停止到那里结束值，而不是在我向上或向下滚动时再次启动。

我在jQuery中非常弱，所以请帮助我并指导我。我希望你理解我的问题。

Answer 1

以下是完成的工作代码：

<style>
.div{background:#ccc;height:1200px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="Count">75</div>
<script>
$(window).scroll(startCounter);
function startCounter() {
var hT = $('.Count').offset().top,
      hH = $('.Count').outerHeight(),
      wH = $(window).height();
    if ($(window).scrollTop() > hT+hH-wH) {
        $(window).off("scroll", startCounter);
        $('.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) + '%');
                }
            });
        });
    }
}
</script>

Answer 2

只需使用div .data之类的.data('counted', true)向$(window).scroll(function() { var hT = $('.love_counter').offset().top, hH = $('.love_counter').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); if (wS > (hT+hH-wH)){ $(".love_count").each(function() { var elm = $(this); if (!elm.data('counted')) { elm.data('count', parseInt($(this).html(), 10)); elm.html('0'); count(elm); } }); } }); function count($this){ var current = parseInt($this.html(), 10); $this.html(++current + '%'); if(current != $this.data('count')){ setTimeout(function(){count($this)}, 15); } else { $this.data('counted', true); } }添加标记。

.top_div {
  background-color: red;
  height: 650px;
}
.love_count {
  font-size: 75px;
  color: #3D7CB1;
  margin-bottom: 25px;
  font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top_div">
  Top Div
</div>
<div class="love_counter">
  <div class="love_count">75%</div>
  <div class="love_count">30%</div>
</div>

insertEmptyItem

https://jsfiddle.net/5gxw16kd/9/

Answer 3

也许值得一看下面的2个js插件：

http://scrollmagic.io/

http://prinzhorn.github.io/skrollr/

它们都允许您在滚动时添加交互。

滚动到特定元素时触发事件，然后使用jquery将其停止

3 个答案: