【网站】数字滚动效果的实现方法

代码如下：

HTML部分：

<div class="box Counter">
	<ul class="clearfix">
		<li>
			<h2><span class="count">5000</span>㎡</h2>
			<p>独立园区，标准化厂房</p>
			<div class="line"></div>
		</li>
		<li>
			<h2><span class="count">4000</span>㎡</h2>
			<p>办公区域，拥有高端实验室</p>
			<div class="line"></div>
		</li>
	</ul>
</div>		

JS部分：

<script>
	//数字滚动效果
	var flag = 1;
	$(window).scroll(function() {
		// 滚动条距离顶部的距离 大于 3800px时
		if($(window).scrollTop() >= 3800 && flag == 1) {
			$('.count').each(function() {
				(function rec(self, cnt) {
					$(self).prop('Counter', 0).animate({
						Counter: cnt
					}, {
						duration: 1000,
						easing: 'swing',
						step: function(now) {
							$(self).text(Math.ceil(now));
						},
						complete: function() {}
					});
				}(this, $(this).text()));
			});
			flag = 2;
		}
	});
</script>

个人总结：此处踩坑的原因在于js的判断上。

在宏鑫源网站上因为首页是滚屏的形式，所以出现数字滚动效果时，判断的是当前是哪一屏幕。

而在之前的字体公益站上，首页的正常的滚动条形式，所以出现数字滚动效果时，判断的是滚动条距离顶部的高度。