当我们到达 jQuery 中的特定部分时如何运行计数器

有时候我们需要在页面滚动到某个特定部分时运行一个计数器。在这个例子中，我们将会使用 jQuery 实现这个效果。以下是实现过程：

HTML

首先，我们需要在 HTML 中添加一个计数器：

<div class="counter" data-count="100">0</div>

这里，我们创建了一个 div 元素，添加了一个 counter 类，表示这个元素是一个计数器。使用 data-count 属性来设置计数器的最大值。我们将在 JavaScript 代码中更新这个元素的文本内容来更新计数器。

CSS

我们需要添加一些 CSS 样式来让计数器在页面中正确地显示。下面是一个简单的样式：

.counter {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin: 50px 0;
}

这个样式将计数器增大到页面中比较明显，设置了粗体字体，让计数器看上去更突出。同时设置了居中对齐，并在计数器上下各添加了一些空白来与页面内容分开。

JavaScript

下面是完整的 JavaScript 代码：

$(document).ready(function() {
  // 当页面滚动时执行
  $(window).scroll(function() {
    // 获取计数器元素
    var counter = $('.counter');
    // 计数器当前值
    var currentCount = parseInt(counter.text(), 10);
    // 计数器最大值
    var maxCount = parseInt(counter.attr('data-count'), 10);
    // 当计数器元素完全可见时
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      // 增加计数器当前值
      if (currentCount < maxCount) {
        counter.text(currentCount + 1);
      }
    }
  });
});

这段代码使用 jQuery 监听 window 对象的滚动事件，当页面滚动时执行相应代码。当计数器元素完全可见时，代码增加计数器的当前值，如果当前值小于最大值，则更新计数器元素的文本内容。

这个代码片段需要包含在一个 $(document).ready() 函数中，以确保 jQuery 准备好之后再执行代码。

总结

我们介绍了如何在 jQuery 中实现一个滚动时自动运行的计数器。通过使用 jQuery 监听页面滚动事件，当计数器元素完全可见时更新计数器的当前值。这里使用了 HTML、CSS 和 JavaScript 来完整实现这个效果。