Javascript 仅当节显示在浏览器视图中时，jQuery计数才为目标编号

在中，如果向下滚动到“奖牌部分”

刷新页面后，您将看到数字滚动并停在目标位置

现在的问题是，只有当奖牌部分出现在浏览器视图中时，我们才能让数字滚动

现在发生的是，当用户加载网站时，数字会完美滚动，但它们发生在后台。当用户向下滚动到奖牌部分时，该效果将不可见，因为此时该效果已消失，他需要刷新页面以查看效果

社区里的一个人提出了这个建议。我试着在我的JavaScript中使用这个插件（请按照FIDLE或代码中JavaScript部分的注释）

涉及的代码：

（函数（$）{
$.fn.countTo=函数（选项）{
选项=选项| |{}；
返回$（this）.each（函数（）{
//设置当前元素的选项
变量设置=$.extend（{}，$.fn.countTo.defaults{
from:$（this）.data（'from'），
收件人：$（this）.data（'to'），
速度：$（此）.data（'speed'），
refreshInterval:$（this）.data（'refresh-interval'），
小数：$（this.data（'decimals'））
}，选项）；
//更新值的次数，以及每次更新时值的增量
var循环=Math.ceil（settings.speed/settings.refreshInterval），
增量=（settings.to-settings.from）/循环；
//每次更新都会更改的引用和变量
var self=这个，
$self=$（这个），
loopCount=0，
value=settings.from，
data=$self.data（'countTo'）|{}；
$self.data（'countTo'，data）；
//如果可以找到现有的间隔，请先清除它
if（数据间隔）{
clearInterval（data.interval）；
}
data.interval=setInterval（updateTimer，settings.refreshInterval）；
//用起始值初始化元素
提供（价值）；
函数updateTimer（）{
值+=增量；
loopCount++；
提供（价值）；
if（typeof（settings.onUpdate）=‘function’）{
settings.onUpdate.call（self，value）；
}
如果（循环计数>=循环）{
//删除间隔
$self.removeData（'countTo'）；
clearInterval（data.interval）；
值=设置。到；
if（typeof（settings.onComplete）=‘function’）{
settings.onComplete.call（self，value）；
}
}
}
函数渲染（值）{
var formattedValue=settings.formatter.call（self、value、settings）；
$self.html（formattedValue）；
}
});
};
$.fn.countTo.defaults={
from:0，//元素的起始编号
to:0，//元素应该结束的数字
速度：1000，//在目标数字之间计数需要多长时间
refreshInterval:100，//应更新元素的频率
小数：0，//要显示的小数位数
formatter:formatter，//用于在呈现之前格式化值的处理程序
onUpdate:null，//每次更新元素时的回调方法
onComplete:null//当元素完成更新时的回调方法
};
函数格式化程序（值、设置）{
返回值.toFixed（设置.小数）；
}
}（jQuery））；
jQuery（函数（$）{
//自定义格式示例
$（'#count number'）。数据（'countToOptions'{
格式化程序：函数（值、选项）{
返回值.toFixed（options.decimals）.replace（/\B（？=（？：\d{3}）+（？！\d））/g'，，'）；
}
});
//启动所有计时器
$（'.timer'）。每个（计数）；
函数计数（选项）{
var$this=$（this）；
options=$.extend（{}，options |{}，$this.data（'countToOptions'）|{}）；
$this.countTo（选项）；
}
});
//当元素在浏览器视口中可见/不可见时触发的显示/消失事件插件。
//singleRun：布尔值，以确保只设置一次动画
var singleRun=true；
//当.counter容器可见时执行
$（“.counter”）。在（“出现”时，函数（数据）{
//初始化计数器
var计数器={}；
var i=0；
如果（单次运行）{
//跟踪每个计数器
$（“.timer”）。每个（函数（）{
计数器[this.id]=$（this.data（“to”）；
i++；
});
//设置计数器的动画
$。每个（计数器、功能（键、val）{
$({
countVal:0
}).制作动画({
countVal:val
}, {
持续时间：1500，
放松：“线性”，
步骤：函数（）{
//更新显示
$（“#”+key.text（Math.floor（this.countVal））；
}
});
});
singleRun=false；
}
});
/*CSS文档*/
/*浮动元素
---------------------------------*/
.fl lt{
浮动：左；
}
.fl rt{
浮动：对；
}
/*清除浮动元素
---------------------------------*/
.清楚{
明确：两者皆有；
显示：块；
溢出：隐藏；
可见性：隐藏；
宽度：0；
身高：0；
}
.clearfix:之前，
.clearfix:之后{
内容：'\0020'；
显示：块；
溢出：隐藏；
可见性：隐藏；
宽度：0；
身高：0；
}
.clearfix:之后{
明确：两者皆有；
}
.图{
边际：0px；
}
img{
最大宽度：100%；
}
A.
a:悬停，
a:主动的{
大纲：0px！重要
}
@字体{
字体系列：“FontAwesome”；
src:url（'../fonts/fontawesome webfont.eot？v=4.1.0'）；
src:url（'../fonts/fontawesome webfont.eot？#iefix&v=4.1.0'）格式（'embedded-opentype'）、url（'../fonts/fontawesome webfont.woff？v=4.1.0'）格式（'woff'）、url（'../fontawesome webfont.ttf？v=4.1.0'）格式（'truetype'）、url（'../fonts/fontawesome WebFontFontAwesome WebFontFont.svg？v=4.1.0'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
/*主要风格
---------------------------------*/
身体{
背景：#fff；
字体系列：“开放式Sans”，无衬线；
字体大小：14px；
字体大小：正常；
颜色：#888888；
保证金：0；
}
氢{
字体-s
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.yourDiv').fadeIn();
  } else {
    $('.yourDiv').fadeOut();
  }
});

$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (x > y) {
     //Put your effect functions in here.
  }
});