Запустите некоторый код, когда прокрутите вниз до определенного раздела

Question

Индикаторы выполнения начинаются с анимации при загрузке страницы.Мне нравится запускать анимацию на индикаторах выполнения, когда я перехожу к разделу «Навыки».Я использовал загрузчик 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);

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