BootStrap ScrollSpy add / remove class to the section that is in view

Question

I am using BS ScrollSpy & wanted to add/remove a class to each section that is currently in view. Like "active" or "in-view" or similar. Is this possible using just the BS JS?

One at a time only.

<section id="welcome" class="section-section">

<section id="welcome" class="section-section in-view">

Answer 1

I have created the small snippet with this you can add .active class to current section and remove from other sections.

Check Demo HERE

HTML:

<!-- Navs to be spied and automatically change through navigation -->
<div id="navs">
  <ul class="nav nav-pills">
    <li role="presentation" class="active">
      <a href="#top">Top</a>
    </li>
    <li role="presentation">
      <a href="#middle">Middle</a>
    </li>
    <li role="presentation">
      <a href="#bottom">Bottom</a>
    </li>
  </ul>
</div>

<!-- The component "component-to-spy" is spying now "navs" -->
<div id="component-that-spies" data-spy="scroll" data-target="#navs">
  <!-- You can use any component you want. Try to use an <ul> for the bottom section instead of an <h4> -->
 <section id="top" class="section-section">
   <h4 >Top</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

   <section id="middle" class="section-section">
       <h4>Middle</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="bottom" class="section-section">
    <h4 id="bottom">Bottom</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>


</div>

JS:

function scrollActive(currentId) {
  $('.section-section').removeClass('active');
  $(currentId).addClass('active');
}

$('.nav li').on('activate.bs.scrollspy', function(e) {
  var targetId = $(e.target).find('a').attr('href');
  scrollActive(targetId);

})

I hope it helps you