javascript - 仅当 Javascript 在视口(viewport)中时才执行

Question

我在我的 WordPress 网站中使用此代码来显示计数器，我需要对其进行编辑，以便代码仅在特定 div 位于视口(viewport)中时才进行计数。这是我的网站，带有计数器脚本 - 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>