load jquery when some specific div in page is reached

Question

I want to load jquery function when I reach the specific div in the page. for example I have number-animating jquery library that load on page loading complete. ButI want it delay until visitors reach that part of page.(for example scrolling to a div) this is my code

$('.animate-number').each(function(){
        $(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-duration")));

I search many pages but cant find any helpful trigger for it

Possible duplicate of [Trigger event when user scroll to specific element - with jQuery](https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery) — Roy Bogado, Mar 12 '19 at 08:01
thanks. i used this method but when i reach at div and trigger works it return error :TypeError: $(...).animateNumbers is not a function — hsoft, Mar 12 '19 at 08:23

score 0 · Answer 1 · answered Mar 12 '19 at 09:18

I think you are using jquery.animateNumber.

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
       $('#decimals')
  .animateNumber(
    {
      number: 2500,
      numberStep: function(now, tween) {
        var formatted = now.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
        $(tween.elem).text('$' + formatted);
      }
    },
    20000
  );
       $('#scroll-to').fadeIn(3500);
   }
});

you can see a fiddle here

load jquery when some specific div in page is reached

1 Answers1