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

Question

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>

fedmich · Accepted Answer · 2014-02-21 13:43:47Z

7

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
}

answered Feb 21, 2014 at 13:43

fedmich

5,3733 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Rad · Accepted Answer · 2014-02-21 13:32:20Z

3

Try this:

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

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

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

});

answered Feb 21, 2014 at 13:32

Paul Rad

4,8821 gold badge26 silver badges23 bronze badges

Comments

Rickert · Accepted Answer · 2014-02-21 13:30:29Z

1

try this:

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);

      }
    });
 }
});

it checks how far the div is (in px) from the top and how far you scrolled. and this gets cheched every time you scroll

answered Feb 21, 2014 at 13:30

Rickert

1,6711 gold badge17 silver badges23 bronze badges

3 Comments

Justin Niessner Over a year ago

Think long and hard before using functionality like this on your site. Scrolling is a common behavior. Do you really want code doing calculations/fetching data from the DOM executing every time the user scrolls?

Rickert Over a year ago

you mean i beter could put the element to a var out of the scroll function?

Sinisa O'neill Over a year ago

Thnak you, worked for me. I just needed to add boolean to be executed just once. :)

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Linked

Related