Question

59

Start executing jQuery function when I scroll to a specific < div>

rated 0 times [ 62] [ 3] / answers: 1 / hits: 28881 / 11 Years ago, fri, february 21, 2014, 12:00:00

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>

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

<div id=counter></div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazlynnessencec

Add To Favorites

Follow

Total Points: 434

Total Questions: 113

Total Answers: 94

Location: Norway

Member since Mon, May 23, 2022

2 Years ago

answered 11 Years ago timothyc · Accepted Answer

Working Demo: http://jsfiddle.net/fedmich/P69sL/

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

}