javascript - 滚动到特定 div 或 id 后触发事件

Question

这些天我进行了很多搜索，但没有解决我的问题。

我有下面的脚本，它是一个简单的计数器，它从 0 开始计数一些统计数据。它在我的页面加载时开始。我想在滚动到特定 div 或 id 时触发此事件，但仅触发一次。我看到了很多使用 .one() 方法等的例子，但我没有找到正确的解决方案。

这是我的脚本。

<script type="text/javascript">

$.fn.jQuerySimpleCounter = function( options ) {
        var settings = $.extend({
        start:  0,
        end:    100,
        easing: 'swing',
        duration: 500,
        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
    });
};

$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});

</script>

那么我应该添加什么来在到达某个 div 或 id 后触发它......？

Answer 1

我设法找到了一个适合我的“好”解决方案。做下面的“不太好”的事情。 :) 感谢尼古拉斯的帮助。

<script type="text/javascript">

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  var one = $('.tworow').position().top;
  var two = $('.endrow').position().top;
  if (scroll > one & scroll < two) {

$.fn.jQuerySimpleCounter = function( options ) {
        var settings = $.extend({
            start:  0,
            end:    100,
            easing: 'swing',
            duration: 500,
            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
        });
    };

$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});

  };
});

当滚动到达某个 div 时，它就会开始，之后我将另一个 div 放在事件应该结束的位置，并使用 if 条件控制它。现在触发事件的页面区域是 2 个 div 之间的一个非常小的“区域”。