html 滚动开始计算没有插件的数字

Posted 2021-05-11

html, body { margin: 0; padding: 0; background-color: lightblue; }
ul, li { margin: 0; padding: 0; list-style: none; text-align: center; }
li { display: inline-block; margin: 0 50px; }
.space { height: 100vh; }
h2 { font-size: 40px; text-align: center; letter-spacing:  5px; text-transform: uppercase; }
h3 { font-size: 80px; opacity: 0; }

Scroll To Start Counting Number Without Plugin
----------------------------------------------


A [Pen](https://codepen.io/jksakura/pen/KmeYvG) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).

[License](https://codepen.io/jksakura/pen/KmeYvG/license).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

jQuery(function($){
    scrollTrigger( $('.counter'), countUp );
    $(document).scroll(function() {
        scrollTrigger( $('.counter'), countUp );
    });
});

var countUp = function() {
    $('.counter').each(function() {
        var $this = $(this);
        var countTo = $this.attr('data-count');
        var decimal = $this.attr('data-decimal');
        var dataBefore = ($this.attr('data-before')) ? $this.attr('data-before') : '';
        var dataAfter = ($this.attr('data-after')) ? $this.attr('data-after') : '';

        $({ countNum : $this.text() }).animate({
            countNum: countTo
        },
        {
            duration: 3000,
            easing: 'linear',
            step: function() {
                (decimal == 0) ? decimalNum = 1 : decimalNum = Math.pow(10,decimal);
                $this.text(dataBefore + Math.round(this.countNum*decimalNum)/decimalNum + dataAfter);
        },
            complete: function() {
                $this.text(dataBefore + Math.round(this.countNum*decimalNum)/decimalNum + dataAfter);
            }
        });  
        $this.animate({ opacity: 1 }, 3000);
    });
}

var scrollTrigger = function(scrollElement, scrollAction) {
    var nm = $("html").scrollTop();
    var nw = $("body").scrollTop();
    var n = (nm > nw ? nm : nw);
    
    var element = scrollElement;
    var elementTop = element.offset().top;
    var screenHeight = $(window).height();
    
    if( n + screenHeight > elementTop) {
        if( $(element).hasClass('scrollTrigger') == true ) {
            scrollAction();
        }
        $(element).removeClass('scrollTrigger');
    }
}

<div class="space">
  <h2>Scroll Down</h2>
</div>
<ul class="number-container">
  <li>
    <h3 class="counter scrollTrigger" data-count="1800" data-decimal="0">0</h3>
  </li>
  <li>
    <h3 class="counter scrollTrigger" data-count="800" data-decimal="0">0</h3>
  </li>
  <li>
    <h3 class="counter scrollTrigger" data-count="2400.85" data-decimal="2">0</h3>
  </li>
  <li>
    <h3 class="counter scrollTrigger" data-count="859.111" data-decimal="3" data-after="%">0%</h3>
  </li>
  <li>
    <h3 class="counter scrollTrigger" data-count="281" data-decimal="0" data-before="$">0</h3>
  </li>
  <li>
    <h3 class="counter scrollTrigger" data-count="300" data-decimal="0" data-before="$" data-after="M">$0M</h3>
  </li>
</ul>