Question

我有一个jQuery脚本在页面上显示一个动画计数器，但脚本在页面加载时开始，我需要在用户向下滚动到特定<div>时加载它。

<script>
         $({countNum: $('#counter').text()}).animate({countNum: 63  }, {
          duration: 3000,
          easing:'linear',
          step: function() {
            $('#counter').text(Math.floor(this.countNum));
          },
          complete: function() {
            $('#counter').text(this.countNum);

          }
        });
</script>

当我滚动到页面上的特定<div>时，需要执行此脚本。

<div id="counter"></div>

Answer 1

工作演示：http://jsfiddle.net/fedmich/P69sL/

试试这个，在start_count上添加你的代码......然后确保添加一个布尔值来运行你的代码一次。

$(function() {
    var oTop = $('#counter').offset().top - window.innerHeight;
    $(window).scroll(function(){

        var pTop = $('body').scrollTop();
        console.log( pTop + ' - ' + oTop );   //just for your debugging
        if( pTop > oTop ){
            start_count();
        }
    });
});

function start_count(){
    alert('start_count');
    //Add your code here
}

Answer 2

试试这个：

var div_top = $('#counter').offset().top;
$(window).scroll(function(){
 if($(window).scrollTop() > div_top){
     $({countNum: $('#counter').text()}).animate({countNum: 63  }, {
      duration: 3000,
      easing:'linear',
      step: function() {
        $('#counter').text(Math.floor(this.countNum));
      },
      complete: function() {
        $('#counter').text(this.countNum);

      }
    });
 }
});

它会从顶部检查div的距离（以px为单位）以及滚动的距离。每当你滚动

时，这就会受到伤害

Answer 3

试试这个：

var eventFired = false,
    objectPositionTop = $('#counter').offset().top;

$(window).on('scroll', function() {

 var currentPosition = $(document).scrollTop();
 if (currentPosition > objectPositionTop && eventFired === false) {
   eventFired = true;
   // your code
 }

});

当我滚动到特定的<div> </div>时，开始执行jQuery函数

3 个答案: