当我滚动到特定的 <div> 时开始执行 jQuery 函数 [重复]答案

【问题标题】：Start executing jQuery function when I scroll to a specific <div> [duplicate]当我滚动到特定的 <div> 时开始执行 jQuery 函数 [重复]
【发布时间】：2014-03-23 01:06:34
【问题描述】：

我有一个在页面上显示动画计数器的 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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
}

【讨论】：

【解决方案2】：

试试这个：

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

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

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

});

【讨论】：

【解决方案3】：

试试这个：

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 为单位）以及您滚动了多远。每次滚动时都会检查这一点

【讨论】：

在您的网站上使用此类功能之前，请三思而后行。滚动是一种常见的行为。你真的希望代码在每次用户滚动时执行计算/从 DOM 中获取数据吗？
你的意思是我可以把元素放到滚动函数之外的 var 中？
谢谢你，为我工作。我只需要添加布尔值就可以执行一次。 :)