javascript - 向下滚动到特定部分时运行一些代码
问题描述
加载页面时,进度条以动画开头。当我滚动到“技能”部分时,我喜欢在进度条上运行动画。我用过引导滚动间谍。
- 这是我的 HTML 技能部分。
<div class="container-fluid" id="skills">
<h2 class="skill">TECHNICAL SKILLS</h2>
<p class="lead">I can say i’m quite good at</p>
<div class="row">
<div class="col-md-4">
<div id="htmlCss"></div>
<h4>Html5 / Css3</h4>
</div>
</div>
</div>
- 这是我的 JS
$('body').scrollspy({ target: '#myNav' });
var bar = new ProgressBar.Circle(htmlCss, {
color: '#474D5D',
trailColor: '#E1E1E3',
trailWidth: 9,
duration: 1400,
easing: 'bounce',
strokeWidth: 9,
from: {color: '#FFEA82', a:0},
to: {color: '#ED6A5A', a:1},
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.style.strokeLinecap = 'round';
var value = Math.round(circle.value() * 100)+"%";
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = 'Open Sans, sans-serif;';
bar.text.style.fontSize = '1.4rem';
bar.text.style.fontWeight = '300';
bar.animate(0.90);
解决方案
使用activate.bs.scrollspy
事件
$('body').on('activate.bs.scrollspy', function () {
if($('a[href="#skills"]').hasClass('active')) {//change this to reflect the section currently active
bar.animate(0.90);
}
})
推荐阅读
- python - 替换列值熊猫中所有值的更好方法
- angular - Angular + Google Analytics:使用新的分析跟踪页面浏览量
- runtime - Webpack5 Module Federation,可以在运行时使用吗?
- javascript - 我的英语驱动器宏不适用于法语驱动器
- bash - 使用 ps|wc -l 带或不带 bash 变量的区别
- android - Android:对如何获取 AudioTrack 生成和播放的频率幅度感到困惑
- omnet++ - 相扑/静脉不会产生所有车辆
- firebase - 输入'未来
' 不是 'Widget?' 类型的子类型 - python-3.x - 如何生成带有坐标的xfdf文件?
- python - 当地时区不显示时间