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

这应该会为您提供您正在寻找的结果：

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  var one = $('element').position().top;
  var count = 0;
  if (scroll > one) {
    var newCount = count + 1;
    if (newCount === 1) {
      //do something
    };
  };
});

Answer 2

我设法找到了一个好的＆＃34;解决方案对我有用。做下面的事情＆＃34;不太好＆＃34;事情。 :)感谢Nikolas的帮助。

<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条件控制它。现在触发事件的页面区域是一个非常小的区域＆＃34;两个div之间。

滚动到特定div或ID

2 个答案: