滚动超出文档中的特定点后激活动画

Question

我用js做了一个向上计数的计数器动画，但是当我刷新页面时计数器就开始向上计数动画（不管我在哪里，也不管我是否能看到它）。

我希望计数器仅在计数器 div 位于视点中时（当我向下滚动并看到它时）开始工作。

超文本标记语言

<div class="content bg-warning">

    <div class="row m-0 py-5 d-flex justify-content-center">

        <div class="counter" data-count="2200" style="color: white; font-size: 32px; font-weight: bold;">0</div>

    </div>

</div>

js

<script type="text/javascript">

    $('.counter').each(function() {

      var $this = $(this),

          countTo = $this.attr('data-count');

      

      $({ countNum: $this.text()}).animate({

        countNum: countTo

      },

      {

        duration: 8000,

        easing:'linear',

        step: function() {

          $this.text(Math.floor(this.countNum));

        },

        complete: function() {

          $this.text(this.countNum);

          //alert('finished');

        }

      });  

    });

</script>

我该如何解决这个问题？

Answer 1

用于$(window).scroll()监视当前滚动位置（每个滚动像素触发一次）用于$(window).scrollTop()获取当前滚动位置*用于$(element).offset()获取元素的 .top 和 .left 坐标*用于$(window).height()获取视口的高度* calculated from top of document您想要计算要滚动到的元素距视口底部有多远。该计算（简化）为：element_position - viewport_height = 折叠下方的距离重要提示：请注意，window.scroll()每滚动一个像素就会触发一次。这很棒，但它可能会使您的应用程序陷入困境。通常的解决方案是实施去抖器。n这是一个例子：var st = $(window).scrollTop();var fin = calcWhenDivInWindow();var off = 20; //How far counter div must be above bottom of screen before count begins$(window).scroll(function(){    st = $(this).scrollTop();    if (st > fin+off) doCount();});function doCount(){    $('.counter').each(function() {      var $this = $(this),          countTo = $this.attr('data-count');      $({ countNum: $this.text()}).animate({        countNum: countTo      },      {        duration: 8000,        easing:'linear',        step: function() {          $this.text(Math.floor(this.countNum));        },        complete: function() {          $this.text(this.countNum);        }      });      });}function calcWhenDivInWindow(){    var tt = $('.content').offset().top;    var th = $('.content').outerHeight();    var ww = $(window).height();    return tt+th-ww;}*{font-family:Arial;font-size:1.2rem;}.stuff1{height:80vh;width:98vw;background:pink;}.stuff2{height:50vh;width:98vw;background:lightblue;}.stuff3{height:50vh;width:98vw;background:palegreen;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script><div class="stuff1">Stuff n Nonsense (scroll slowly...)</div><div class="stuff2">More Stuff n Nonsense</div><div class="content bg-warning">    <div class="row m-0 py-5 d-flex justify-content-center">        <div class="counter" data-count="2200" style="color: white; font-size: 32px; font-weight: bold;">0</div>    </div></div><div class="stuff3"></div>