Test

Scrollspy On Section

by digitayfun

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<section>
<div id="nav" class="active-spy target-cstm">
  <ul class="nav">
    <li>
      <a href="#first">1st</a>
    </li>
    <li>
      <a href="#second">2nd</a>
    </li>
    <li>
      <a href="#third">3rd</a>
    </li>
    <li>
      <a href="#fourth">4th</a>
    </li>
  </ul>
</div>
<div id="first">
  first div
</div>
<div id="second">
  second div
</div>
<div id="third">
  third div
</div>
<div id="fourth">
  fourth div
</div>
</section>

CSS

#nav {
  position: fixed;
  right: 1em;
  min-width: 10em;
}

.active {
  background-color: #f9f;
}

div:not(#nav) {
  height: 500px;
}
section {height:200px; position:relative; overflow-y:scroll; background:grey;}

JavaScript

$("section").scrollspy({
  target: ".target-cstm"
});

$(document).on('click', 'a', function(event) {
  $('section').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, {
    duration: 300,
    start: function() {
      $("#nav").removeClass("active-spy");
    },
    complete: function() {
      $("#nav").addClass("active-spy");
      $(".active").removeClass("active");
      $(event.target.parentNode).addClass("active");
    }
  });
});
$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})