Start executing jQuery function when I scroll to a specific <div>
css, html, javascript, jquery
Solution
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
}
Problem
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> ```