当我滚动到特定< div>时，开始执行jQuery函数 [英] Start executing jQuery function when I scroll to a specific <div>

问题描述

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

I have a jQuery script that shows an animated counter on page, but the script starts on page load, and I need it to be loaded when the user scrolls down to a specific <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>时，需要执行这个脚本;

This script need to be executed when I scroll to this specific <div> on a page.

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

推荐答案

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

尝试此操作，将您的代码添加到start_count ...然后确保添加一个布尔值来只运行一次你的代码。

Try this, add your code on the start_count... then make sure to add a boolean to run your code only once.

$(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
}

这篇关于当我滚动到特定< div>时，开始执行jQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！