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

【问题标题】：Run some code when scroll down to a specific section向下滚动到特定部分时运行一些代码
【发布时间】：2018-06-05 10:22:12
【问题描述】：

页面加载时进度条以动画开头。当我滚动到“技能”部分时，我喜欢在进度条上运行动画。我用过 bootstrap scrollspy。

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

【问题讨论】：

标签： javascript jquery html bootstrap-4 scrollspy

【解决方案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);
  }
})

【讨论】：

我把它放在我的脚本中，但没有用，我不知道为什么。当我尝试 if($('a[href="#skills"]').hasClass('active')) { bar.animate(0.90); } 但仅在单击或向下滚动到“技能部分”并刷新页面时运行。