Javascript 在用户向下滚动时设置图表动画

我有一个关于CSS3和JavaScript的问题。我想让这些图表栏在用户滚动时显示动画？现在，它在页面加载500毫秒后设置动画。我想在用户滚动时启动图表栏动画。但是，我不知道如何检测用户是否可以看到特定的图表

setTimeout（函数开始（）{
$（'.bar'）。每个（函数（i）{
var$bar=$（此项）；
$（this.append（“”）
setTimeout（函数（）{
$bar.css（'width'，$bar.attr（'data-percent'）；
}，i*100）；
});
$（'.count'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.parent（'.bar'）.attr（'data-percent'））
}, {
期限：2000年，
放松:"摇摆",，
步骤：功能（现在）{
$（this.text（Math.ceil（now）+'%'）；
}
});
});
}，500）

@导入url(http://fonts.googleapis.com/css?family=Droid+衬线：400400Italic |蒙特塞拉特：400700）；
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，dd，ol，ul，li，fieldset，form，label，label，table，table，table，table，caption，tbody，tfoot，thead，tr，th，th，th，the，the，the，the，of，旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体：继承；
字体大小：100%；
垂直对齐：基线；
}
html{
线高：1；
}
ol，ul{
列表样式：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
标题，th，td{
文本对齐：左对齐；
字体大小：正常；
垂直对齐：中间对齐；
}
q、 大宗报价{
报价：无；
}
q:before，q:after，blockquote:before，blockquote:after{
内容：“；
内容：无；
}
img{
边界：无；
}
文章、旁白、详细信息、图表、页脚、页眉、H组、主菜单、菜单、导航、章节、摘要{
显示：块；
}
* {
框大小：边框框；
}
身体{
颜色：#333；
-webkit字体平滑：抗锯齿；
字体系列：“蒙特塞拉特”，无衬线；
填充：2%；
}
.包裹{
宽度：50%；
保证金：0自动；
}
h1{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：粗体；
文本对齐：居中；
字号：1.5em；
填充：.5em0；
边缘底部：1米；
边框底部：1px实心#达达；
字母间距：3px；
文本转换：大写；
}
ulli{
线高：2；
字体大小：粗体；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：.85em；
文本转换：大写；
明确：两者皆有；
}
李：以前{
内容：“\2023”；
填充：0 1em 0；
}
.酒吧{
背景：#e74c3c；
宽度：0；
边缘：.25em0；
颜色：#fff；
位置：相对位置；
过渡：宽度2s，背景.2s；
明确：两者皆有；
}
.bar:n个类型（2n）{
背景：#ed7669；
}
.酒吧标签{
字体大小：.75em；
填充：1em；
背景#3d3d；
宽度：8em；
显示：内联块；
位置：相对位置；
z指数：2；
字体大小：粗体；
字体系列：“蒙特塞拉特”，无衬线；
}
.bar.标签.灯{
背景#5757；
}
.伯爵{
位置：绝对位置；
右：.25em；
顶部：.75em；
填充：.15em；
字体大小：.75em；
字体大小：粗体；
字体系列：“蒙特塞拉特”，无衬线；
}

动画条形图
Photoshop
插图画家
杂志排版
HTML
CSS
jQuery
RWD
PHP
WordPress
高级助理秘书长/高级助理秘书长

这就是您要寻找的：

$(window).scroll(function() {
    if ($(this).scrollTop() >= $('.holder').offset().top) {
        ...
    }
});

当

窗口

对象的

滚动顶部

位于购物车的开头时，这将调用动画，从而确保在购物车位于页面最底部的情况下，动画在正确的点激活，而不是太早或太晚

$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>=$（'.holder'）.offset（）.top）{
$（'.bar'）。每个（函数（i）{
var$bar=$（此项）；
$（this.append（“”）
setTimeout（函数（）{
$bar.css（'width'，$bar.attr（'data-percent'）；
}，i*100）；
});
$（'.count'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.parent（'.bar'）.attr（'data-percent'））
}, {
期限：2000年，
放松:"摇摆",，
步骤：功能（现在）{
$（this.text（Math.ceil（now）+'%'）；
}
});
});
}
})

@导入url(http://fonts.googleapis.com/css?family=Droid+衬线：400400Italic |蒙特塞拉特：400700）；
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，dd，ol，ul，li，fieldset，form，label，label，table，table，table，table，caption，tbody，tfoot，thead，tr，th，th，th，the，the，the，the，of，旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体：继承；
字体大小：100%；
垂直对齐：基线；
}
html{
线高：1；
}
ol，ul{
列表样式：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
标题，th，td{
文本对齐：左对齐；
字体大小：正常；
垂直对齐：中间对齐；
}
q、 大宗报价{
报价：无；
}
q:before，q:after，blockquote:before，blockquote:after{
内容：“；
内容：无；
}
img{