当底部显示100px时如何触发滚动上的jquery函数

Question

I have "fun facts" counter on my web site and also a jQuery function which animate counting numbers inside fun facts div. Now it is triggered as page loads. I would like to start it when user scrolls down to it. For example when div appears 100px from the bottom of the screen.

This is my jQuery function which starts counting as page loads:

(function($) {
    "use strict";
    function count($this){
    var current = parseInt($this.html(), 10);
    current = current + 10; /* Where 50 is increment */ 
    $this.html(++current);
        if(current > $this.data('count')){
            $this.html($this.data('count'));
        } else {    
            setTimeout(function(){count($this)}, 50);
        }
    }           
    $(".stat-count").each(function() {
      $(this).data('count', parseInt($(this).html(), 10));
      $(this).html('0');
      count($(this));
    });
})(jQuery);

and here is my try to make it work when user scrolls down to it:

(function($) {
    "use strict";
    function count($this){
    var current = parseInt($this.html(), 10);
    current = current + 10; /* Where 50 is increment */ 
    $this.html(++current);
        if(current > $this.data('count')){
            $this.html($this.data('count'));
        } else {    
            setTimeout(function(){count($this)}, 50);
        }
    }        




$(window).scroll(function() {
    $(".stat-count").each(function() {


    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {

          $(this).data('count', parseInt($(this).html(), 10));
          $(this).html('0');
          count($(this));

        }

       }
    }

 })(jQuery);

Thank you! :)

Answer 1

May be something like this:

$(window).on('scroll', function(event) {
  if(document.body.offsetHeight - event.pageY <= 100 ) {
   //onscoll effect
}

}