如何将 jQuery Counter 停在上次离开的位置？答案

【问题标题】：How to stall jQuery Counter at where it was last left?如何将 jQuery Counter 停在上次离开的位置？
【发布时间】：2020-09-07 11:59:18
【问题描述】：

我的网站上有一个简单的 jquery 计数器。它设计为在视口中时启动，但当您进一步滚动时，计数器会重置。我怎样才能让柜台停在上次离开的地方？

请随意编辑或使用代码：

https://jsfiddle.net/52x0uyjp/18/

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}

console.log(isInViewport($('#number3').get(0)))


$.fn.jQuerySimpleCounter = function(options) {
  var settings = $.extend({
    start: 0,
    end: 100,
    easing: 'swing',
    duration: 400,
    complete: ''
  }, options);

  var thisElement = $(this);

  $({
    count: settings.start
  }).animate({
    count: settings.end
  }, {
    duration: settings.duration,
    easing: settings.easing,
    step: function() {
      var mathCount = Math.ceil(this.count);
      thisElement.text(mathCount);
    },
    complete: settings.complete
  });
}


function startCounters() {
  if (isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({
    end: 52,
    duration: 5000
  });
  if (isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({
    end: 52,
    duration: 5000
  });
  if (isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({
    end: 52,
    duration: 5000
  });
}
$(document).ready(function() {
  startCounters()
})
$(window).on("scroll", function() {
  startCounters()
})

.projectFactsWrap {
  display: flex;
  margin-top: 0px;
  flex-direction: row;
  flex-wrap: wrap;
}

#projectFacts .fullWidth {
  padding: 0;
}

.projectFactsWrap .item {
  width: 33%;
  height: 100%;
  padding: 50px 0px;
  text-align: center;
}

.projectFactsWrap .item:nth-child(1) {
  background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2) {
  background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3) {
  background: rgb(21, 38, 56);
}

.projectFactsWrap .item p.number {
  font-size: 40px;
  padding: 0;
  font-weight: bold;
}

.projectFactsWrap .item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin: 0;
  padding: 10px;
}

.projectFactsWrap .item span {
  width: 50px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
}

.projectFactsWrap .item i {
  vertical-align: middle;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
}

.projectFactsWrap .item:hover i,
.projectFactsWrap .item:hover p {
  color: white;
}

.projectFactsWrap .item:hover span {
  background: red;
}

@media (max-width: 786px) {
  .projectFactsWrap .item {
    flex: 0 0 100%;
  }
}

.mTop1000 {
  padding-top: 1800px;
  border: 1px solid red;
  padding-bottom: 1000px;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<div id="projectFacts" class="sectionClass">
  <div class="fullWidth eight columns">
    <div class="projectFactsWrap2">
      <div class="item wow fadeInUpBig animated animated" data-number="52" style="visibility: visible;">
        <i class="fa fa-briefcase"></i>
        <p id="number1" class="number">52</p>
        <span></span>
        <p>Projects</p>
      </div>
      <div class="item wow fadeInUpBig animated animated" data-number="34" style="visibility: visible;">
        <i class="fa fa-smile-o"></i>
        <p id="number2" class="number">34</p>
        <span></span>
        <p>Clients</p>
      </div>
      <div class="mTop1000">
        This just gives you a space
      </div>
      <div class=" item wow fadeInUpBig animated animated" data-number="18" style="visibility: visible;">
        <i class="fa fa-coffee"></i>
        <p id="number3" class="number">18</p>
        <span></span>
        <p>Coffee</p>

      </div>
    </div>
  </div>
</div>

【问题讨论】：

每次滚动时都会重新实例化它。 jQuerySimpleCounter 没有暂停

标签： javascript html jquery css counter

【解决方案1】：

您可以使用data-attributes 来存储计数器的计数，如下所示。

你只需要修改你的计数器开始：

var isCounting = thisElement.data("isCounting");
if (isCounting) return;
thisElement.data("isCounting", true);

在你的动画代码中，添加一个回调，将 data 属性设置为 false ：

 () => {
        thisElement.data("isCounting", false);
      })

编辑：根据 cmets 编辑。

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}

console.log(isInViewport($('#number3').get(0)))


$.fn.jQuerySimpleCounter = function(options) {
  var settings = $.extend({
    start: 0,
    end: 100,
    easing: 'swing',
    duration: 400,
    complete: ''
  }, options);

  var thisElement = $(this);
  var isCounting = thisElement.data("isCounting");
  if (isCounting) return;
  thisElement.data("isCounting", true);

  $({
    count: settings.start
  }).animate({
    count: settings.end
  }, {
    duration: settings.duration,
    easing: settings.easing,
    step: function() {
      var mathCount = Math.ceil(this.count);
      thisElement.text(mathCount);
    },
    complete: settings.complete
  }, () => {
    thisElement.data("isCounting", false);
  });
}


function startCounters() {
  if (isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({
    end: 52,
    duration: 5000
  });
  if (isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({
    end: 52,
    duration: 5000
  });
  if (isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({
    end: 52,
    duration: 5000
  });
}
$(document).ready(function() {
  startCounters()
})
$(window).on("scroll", function() {
  startCounters()
})

.projectFactsWrap {
  display: flex;
  margin-top: 0px;
  flex-direction: row;
  flex-wrap: wrap;
}

#projectFacts .fullWidth {
  padding: 0;
}

.projectFactsWrap .item {
  width: 33%;
  height: 100%;
  padding: 50px 0px;
  text-align: center;
}

.projectFactsWrap .item:nth-child(1) {
  background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2) {
  background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3) {
  background: rgb(21, 38, 56);
}

.projectFactsWrap .item p.number {
  font-size: 40px;
  padding: 0;
  font-weight: bold;
}

.projectFactsWrap .item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin: 0;
  padding: 10px;
}

.projectFactsWrap .item span {
  width: 50px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
}

.projectFactsWrap .item i {
  vertical-align: middle;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
}

.projectFactsWrap .item:hover i,
.projectFactsWrap .item:hover p {
  color: white;
}

.projectFactsWrap .item:hover span {
  background: red;
}

@media (max-width: 786px) {
  .projectFactsWrap .item {
    flex: 0 0 100%;
  }
}

.mTop1000 {
  padding-top: 1800px;
  border: 1px solid red;
  padding-bottom: 1000px;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<div id="projectFacts" class="sectionClass">
  <div class="fullWidth eight columns">
    <div class="projectFactsWrap2">
      <div class="item wow fadeInUpBig animated animated" data-number="52" style="visibility: visible;">
        <i class="fa fa-briefcase"></i>
        <p id="number1" class="number">52</p>
        <span></span>
        <p>Projects</p>
      </div>
      <div class="item wow fadeInUpBig animated animated" data-number="34" style="visibility: visible;">
        <i class="fa fa-smile-o"></i>
        <p id="number2" class="number">34</p>
        <span></span>
        <p>Clients</p>
      </div>
      <div class="mTop1000">
        This just gives you a space
      </div>
      <div class=" item wow fadeInUpBig animated animated" data-number="18" style="visibility: visible;">
        <i class="fa fa-coffee"></i>
        <p id="number3" class="number">18</p>
        <span></span>
        <p>Coffee</p>

      </div>
    </div>
  </div>
</div>

【讨论】：

不需要。 .text 包含值
您好埃尔达，感谢您的回答。就像我对 mplungjan 评论的那样。我的问题有点误导。目标不是暂停计数器（或重置它），而是让它计数到特定数字（在视口中开始计数）然后停止它。希望我能澄清一下。代码会是什么样子？不好意思，我今天有点慢:)
太棒了，这正是我一直在尝试归档的内容。非常感谢，埃尔达！

【解决方案2】：

这样会更好。您可能需要停止对退出视口的计数，但是当您这样做时，我的代码将从原来的位置开始

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}

console.log(isInViewport($('#number3').get(0)))


$.fn.jQuerySimpleCounter = function(options) {
  var settings = $.extend({
    start: 0,
    end: 100,
    easing: 'swing',
    duration: 400,
    complete: ''
  }, options);

  var thisElement = $(this);

  $({
    count: settings.start
  }).animate({
    count: settings.end
  }, {
    duration: settings.duration,
    easing: settings.easing,
    step: function() {
      var mathCount = Math.ceil(this.count);
      thisElement.text(mathCount);
    },
    complete: settings.complete
  });
}


function startCounters() {
const start1 = +$('#number1').text();
const end1 = +$('#number1').closest(".item").data("number");
const start2 = +$('#number2').text();
const end2 = +$('#number2').closest(".item").data("number");
const start3 = +$('#number3').text();
const end3 = +$('#number3').closest(".item").data("number");

  if (isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({
    start: start1,
    end: end1,
    duration: 5000
  });
  if (isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({
    start: start2,
    end: end2,
    duration: 5000
  });
  if (isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({
    start: start3,  
    end: end3,
    duration: 5000
  });
}
$(document).ready(function() {
  startCounters()
})
$(window).on("scroll", function() {
  startCounters()
})

.projectFactsWrap {
  display: flex;
  margin-top: 0px;
  flex-direction: row;
  flex-wrap: wrap;
}

#projectFacts .fullWidth {
  padding: 0;
}

.projectFactsWrap .item {
  width: 33%;
  height: 100%;
  padding: 50px 0px;
  text-align: center;
}

.projectFactsWrap .item:nth-child(1) {
  background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2) {
  background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3) {
  background: rgb(21, 38, 56);
}

.projectFactsWrap .item p.number {
  font-size: 40px;
  padding: 0;
  font-weight: bold;
}

.projectFactsWrap .item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin: 0;
  padding: 10px;
}

.projectFactsWrap .item span {
  width: 50px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
}

.projectFactsWrap .item i {
  vertical-align: middle;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
}

.projectFactsWrap .item:hover i,
.projectFactsWrap .item:hover p {
  color: white;
}

.projectFactsWrap .item:hover span {
  background: red;
}

@media (max-width: 786px) {
  .projectFactsWrap .item {
    flex: 0 0 100%;
  }
}

.mTop1000 {
  padding-top: 1800px;
  border: 1px solid red;
  padding-bottom: 1000px;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<div id="projectFacts" class="sectionClass">
  <div class="fullWidth eight columns">
    <div class="projectFactsWrap2">
      <div class="item wow fadeInUpBig animated animated" data-number="52" style="visibility: visible;">
        <i class="fa fa-briefcase"></i>
        <p id="number1" class="number">0</p>
        <span></span>
        <p>Projects</p>
      </div>
      <div class="item wow fadeInUpBig animated animated" data-number="34" style="visibility: visible;">
        <i class="fa fa-smile-o"></i>
        <p id="number2" class="number">0</p>
        <span></span>
        <p>Clients</p>
      </div>
      <div class="mTop1000">
        This just gives you a space
      </div>
      <div class=" item wow fadeInUpBig animated animated" data-number="18" style="visibility: visible;">
        <i class="fa fa-coffee"></i>
        <p id="number3" class="number">0</p>
        <span></span>
        <p>Coffee</p>

      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的快速回复，mplungjan！我刚刚意识到，我的问题有些误导。目标不是暂停计数器（或重置它），而是让它计数到特定数字（在视口中开始计数）然后停止它。希望我能澄清一下。