javascript - 向下滚动到特定部分时运行一些代码

Question

页面加载时，进度条以动画开始。当我滚动到“技能”部分时，我喜欢在进度条上运行动画。我已经使用了引导滚动 spy 。

-这是我的 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);

Answer 1

使用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);
  }
})