只在視口中執行Javascript

Question

我在我的Wordpress站點中使用此代碼來顯示計數器，我需要對其進行編輯，以便代碼只在特定div位於視口中時才計數。這是我的網站與專櫃腳本 - https://www.innovationbham.com/

<div class="wrapper-count"> 
    <div class="counter col_fourth"> 
     <i class="fa fa-code fa-2x"></i> 
     <h2 class="timer count-title" id="count-number" data-to="120" data-speed="2500"></h2><span><img src="<?php the_field('first_image');?>"></span> 
    </div> 

    <div class="counter col_fourth"> 
     <i class="fa fa-coffee fa-2x"></i> 
     <h2 class="timer count-title" id="count-number" data-to="180" data-speed="2500"></h2><span><img src="<?php the_field('second_image');?>"></span> 
    </div> 

    <div class="counter col_fourth"> 
     <i class="fa fa-lightbulb-o fa-2x"></i> 
     <h2 class="timer count-title" id="count-number" data-to="400" data-speed="2500"></h2><span><img src="<?php the_field('third_image');?>"></span> 
    </div> 

    <div class="counter col_fourth end"> 
     <i class="fa fa-bug fa-2x"></i> 
     <span>£</span><h2 class="timer count-title" id="count-number" data-to="11" data-speed="2500"></h2><span>m</span><span><img src="<?php the_field('fourth_image');?>"></span> 
    </div> 
</div> 


<div class="wrapper-count-2"> 
    <div class="counter col_fourth-2"> 
     <p class="count-text-2 ">Startups incubated to date</p> 
    </div> 

    <div class="counter col_fourth-2"> 
     <p class="count-text-2 ">Events held annually</p> 
    </div> 

    <div class="counter col_fourth-2"> 
     <p class="count-text-2 ">Community of digital and tech entrepreneurs</p> 
    </div> 

    <div class="counter col_fourth end-2"> 
     <p class="count-text-2 ">Start-up funding raised so far</p> 
    </div> 
</div> 


<script> 


      (function ($) { 
    $.fn.countTo = function (options) { 
     options = options || {}; 

     return $(this).each(function() { 
      // set options for current element 
      var settings = $.extend({}, $.fn.countTo.defaults, { 
       from:   $(this).data('from'), 
       to:    $(this).data('to'), 
       speed:   $(this).data('speed'), 
       refreshInterval: $(this).data('refresh-interval'), 
       decimals:  $(this).data('decimals') 
      }, options); 

      // how many times to update the value, and how much to increment the value on each update 
      var loops = Math.ceil(settings.speed/settings.refreshInterval), 
       increment = (settings.to - settings.from)/loops; 

      // references & variables that will change with each update 
      var self = this, 
       $self = $(this), 
       loopCount = 0, 
       value = settings.from, 
       data = $self.data('countTo') || {}; 

      $self.data('countTo', data); 

      // if an existing interval can be found, clear it first 
      if (data.interval) { 
       clearInterval(data.interval); 
      } 
      data.interval = setInterval(updateTimer, settings.refreshInterval); 

      // initialize the element with the starting value 
      render(value); 

      function updateTimer() { 
       value += increment; 
       loopCount++; 

       render(value); 

       if (typeof(settings.onUpdate) == 'function') { 
        settings.onUpdate.call(self, value); 
       } 

       if (loopCount >= loops) { 
        // remove the interval 
        $self.removeData('countTo'); 
        clearInterval(data.interval); 
        value = settings.to; 

        if (typeof(settings.onComplete) == 'function') { 
         settings.onComplete.call(self, value); 
        } 
       } 
      } 

      function render(value) { 
       var formattedValue = settings.formatter.call(self, value, settings); 
       $self.html(formattedValue); 
      } 
     }); 
    }; 

    $.fn.countTo.defaults = { 
     from: 0,    // the number the element should start at 
     to: 0,     // the number the element should end at 
     speed: 1000,   // how long it should take to count between the target numbers 
     refreshInterval: 100, // how often the element should be updated 
     decimals: 0,   // the number of decimal places to show 
     formatter: formatter, // handler for formatting the value before rendering 
     onUpdate: null,  // callback method for every time the element is updated 
     onComplete: null  // callback method for when the element finishes updating 
    }; 

    function formatter(value, settings) { 
     return value.toFixed(settings.decimals); 
    } 
}(jQuery)); 

jQuery(function ($) { 
    // custom formatting example 
    $('#count-number').data('countToOptions', { 
    formatter: function (value, options) { 
     return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); 
    } 
    }); 

    // start all the timers 
    $('.timer').each(count); 

    function count(options) { 
    var $this = $(this); 
    options = $.extend({}, options || {}, $this.data('countToOptions') || {}); 
    $this.countTo(options); 
    } 
}); 

</script> 

我徹底難倒就從哪裏開始，所以任何幫助將不勝感激，

謝謝！

Answer 1

下面是一個簡單的實現：

jQuery(window).on("resize scroll", function(){ 
 
    var scrollPosition = jQuery(window).scrollTop(); 
 
    var viewportHeight = window.innerHeight; 
 
    var offset = jQuery("#amIVisible").offset(); 
 
    var elementHeight = jQuery("#amIVisible").height(); 
 
    if(offset.top > scrollPosition - elementHeight && offset.top < scrollPosition + viewportHeight) { 
 
    jQuery("#output").text("visible"); 
 
    } else { 
 
    jQuery("#output").text("invisible"); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <p style="height:1000px; background-color:red;">Blocker</p> 
 
    <p id="amIVisible">Hello World</p> 
 
    <p style="height:1000px; background-color:red;">Blocker</p 
 
</div> 
 
<div id="output" style="position:fixed; left:0px; top:0px;">invisible</div>