JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad [英] JQUERY.COUNTO.JS: On Scroll Count Numbers NOT OnLoad
问题描述
我正在使用一个页面网站，我想用它添加一个计数数字，所以我使用 javascript.countTo.js 。我创建了每个部分以对相关数据进行分组，然后我将部分计数器 < section id =counters> 在我的投资组合部分 < section class =justaddheight portfolio> 。每次页面加载数字计数，当我滚动时，我总是看到数字停止或结束它正在计数。现在，我想要滚动并进入部分计数器 < section id =counter> 即可。另外，我使用了 WOW.js 和 easingJS 与我的网站一起使用，如果你将代码与它结合起来是最好的，但如果没有，它也是可以接受的。代码如下：
I'm working with one page website and I want to add a counting numbers with it, so I use javascript.countTo.js. I created every section to group related data and I put the section counter <section id="counters"> below my portfolio section <section class="justaddheight portfolio">. Everytime the page load the number count and when I scroll I always see that numbers stop or ended it's counting. Now, I want the number counts when I scroll and get into the section counter <section id="counters">. In addition, I used WOW.js and easingJS with my site, it's the best if you combined the code with it, but it also acceptable if not. The code are the following below:
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--The Viewport-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Character Set-->
<meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->
<!--///////////////////////////////////////////////////////
CSS
///////////////////////////////////////////////////////-->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font-Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Icomoon-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!--///////////////////////////////////////////////////////
JAVASCRIPT
///////////////////////////////////////////////////////-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Wow -->
<script src="js/wow.min.js"></script>
<!-- Counter -->
<script src="js/jquery.countTo.js"></script>
<!--Easing-->
<script src="js/jquery.easing.1.3.js"></script>
<!--Custom JS-->
<script src="js/custom.js"></script>
</head>
<body id="top">
<section class="justaddheight text-center about" >
<h1>SCROLL DOWN</h1>
<p>First, Scroll Now</p>
<p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">
</section>
<section class="justaddheight portfolio">
</section>
<section id="counters">
<div class="ace-overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-briefcase to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="50">89</span>
<span class="ace-counter-label">Finished projects</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-code to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
<span class="ace-counter-label">Templates</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-cup to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
<span class="ace-counter-label">Cup of coffees</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-people to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
<span class="ace-counter-label">Happy clients</span>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<style type="text/css">
/* USE JUST TO ADJUST HEIGHT*/
.justaddheight{
height: 500px;
}
.text-center{
text-align: center;
}
</style>
<script type="text/javascript">
$('.counter-number').countTo();
</script>
推荐答案
要检查元素是否滚动到视图中，我将使用此答案中的功能。
To check if the element is scrolled into view, I'll use function from this answer.
现在，我们可以使用以下函数检查元素 #counters 是否在视图中
Now, we can check if the element #counters is in view by using below function
function isScrolledIntoView(el) {
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
首先使用 getBoundingClientRect（） 。这将返回 top ， left ， bottom ，正确，宽度和高度调用该方法的元素。这些可用于检测元素是否在视图内。
top 和 bottom 取自此对象，并检查元素底部是否小于窗口高度。
This first gets the bounding points using getBoundingClientRect(). This returns top, left, bottom, right, width and height of the element on which the method is called. These can be used to detect if element is inside view.
top and bottom are taken from this object and checked if element bottom is less than window height.
首先，在<$ c上绑定滚动事件$ C>窗口。在处理程序内部，检查元素是否在视图中。当元素进入视图时，然后调用元素上的插件并取消绑定滚动事件。
First of all, bind scroll event on the window. Inside the handler, check if element is in the view. When element comes in the view, then call the plugin on elements and unbind the scroll event.
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('counters'))) {
$('.ace-counter-number').countTo();
// Unbind scroll event
$(window).off('scroll');
}
});
.justaddheight {
height: 500px;
}
.text-center {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
<section class="justaddheight text-center about">
<h1>SCROLL DOWN</h1>
<p>First, Scroll Now</p>
<p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">
</section>
<section class="justaddheight portfolio">
</section>
<section id="counters">
<div class="ace-overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-briefcase to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="100">89</span>
<span class="ace-counter-label">Finished projects</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-code to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
<span class="ace-counter-label">Templates</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-cup to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
<span class="ace-counter-label">Cup of coffees</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-people to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
<span class="ace-counter-label">Happy clients</span>
</div>
</div>
</div>
</div>
</section>
这篇关于JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
