时间戳

首页 > 解决方案 > JQuery Facts Counter 在移动视图上不起作用

javascript - JQuery Facts Counter 在移动视图上不起作用

问题描述

我有一个网站，上面有一些事实计数器，但是当我在手机上测试或浏览器上的移动视图时，我注意到计数器不起作用。

我正在使用 Jquery CountTo 插件。几天来一直试图让它工作。任何建议将不胜感激。

插件 - https://github.com/mhuggins/jquery-countTo 

           //CountTo function 
           function factCounter() {
          if ($('.fact-counter').length) {
            $('.fact-counter .counter-column.animated').each(function() {
    
              var $t = $(this),
                n = $t.find(".count-text").attr("data-stop"),
                r = parseInt($t.find(".count-text").attr("data-speed"), 10);
    
              if (!$t.hasClass("counted")) {
                $t.addClass("counted");
                $({
                  countNum: $t.find(".count-text").text()
                }).animate({
                  countNum: n
                }, {
                  duration: r,
                  easing: "linear",
                  step: function() {
                    $t.find(".count-text").text(Math.floor(this.countNum));
                  },
                  complete: function() {
                    $t.find(".count-text").text(this.countNum);
                  }
                });
              }
            });
          }
        }
   
   
   
   //Call to function
     $(window).scroll('scroll', function() { 
          (function($) {
             factCounter();
          })(jQuery);
        });
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
        <section class="fact-counter" style="background: url(images/resource/1.jpg);">
          <div class="container">
            <div class="row clearfix">
              <div class="counter-outer clearfix">
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-star"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="100">0</span><span>+</span></div>
                      <h4 class="counter-title">Site Inspections</h4>
                    </div>
                  </div>
                </article>
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-people"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="3">0</span></div>
                      <h4 class="counter-title">Qualified Staff</h4>
                    </div>
                  </div>
                </article>
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-interface"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="100">0</span><span>+</span></div>
                      <h4 class="counter-title">Project's Done</h4>
                    </div>
                  </div>
                </article>
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-trophy"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="250">0</span><span>+</span></div>
                      <h4 class="counter-title">Happy Clients</h4>
                    </div>
                  </div>
                </article>
              </div>
            </div>
          </div>
        </section>

标签： javascriptjqueryhtmlmobile

解决方案

决定采用这种方法，似乎已经解决了我的问题。

        //Facts Counter (Redone)
function isScrolledIntoView(el) {
	var elemTop = el.getBoundingClientRect().top;
	var elemBottom = el.getBoundingClientRect().bottom;

	var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
	return isVisible;
}

$(window).on('scroll', function() {
	if (isScrolledIntoView(document.getElementById('counter'))) {
		$('.count-text').countTo();

		// Unbind scroll event
		$(window).off('scroll');
	}
});
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
    <section id="counter" class="fact-counter" style="background: url(images/resource/1.jpg);">
        <div class="container">
            <div class="row clearfix">
                <div class="counter-outer clearfix">
                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-star"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="100">0</span><span>+</span></div>
                                <h4 class="counter-title">Site Inspections</h4>
                            </div>
                        </div>
                    </article>

                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-people"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="3">0</span></div>
                                <h4 class="counter-title">Qualified Staff</h4>
                            </div>
                        </div>
                    </article>

                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-interface"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="100">0</span><span>+</span></div>
                                <h4 class="counter-title">Project's Done</h4>
                            </div>
                        </div>
                    </article>

                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-trophy"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="250">0</span><span>+</span></div>
                                <h4 class="counter-title">Happy Clients</h4>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

推荐阅读