Javascript 动画仅在到达网页的特定部分时触发

Question

我想要一个只有当网页到达特定部分时才会触发的计数器动画。例如，js 文件将是这样的。我希望仅当页面到达特定部分时才开始计数。

    const counters = document.querySelectorAll('.counter');
    const speed = 200; // The lower the slower

    counters.forEach(counter => {
    const updateCount = () => {
        const target = +counter.getAttribute('data-target');
        const count = +counter.innerText;

        // Lower inc to slow and higher to slow
        const inc = target / speed;

        // console.log(inc);
        // console.log(count);

        // Check if target is reached
        if (count < target) {
            // Add inc to count and output in counter
            counter.innerText = count + inc;
            // Call function every ms
            setTimeout(updateCount, 1);
        } else {
            counter.innerText = target;
        }
    };

    updateCount();
});

Answer 1

你可以使用 Jquery 轻松地做到这一点

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      $("div").css("background-color", "#111111");
    } else {
      $("div").css("background-color", "transparent");
    }
  });
});

div {
  height: 120vh;
  transition-duration: 0.5s;
}

<div>
  Scroll to Change Background
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>