How to make use of it:

1. Create website navigation that accommodates anchor links pointing to sections of your web page.

<!-- Site Nav -->
<div class="header">
  <nav class="scroll-spy">
    <ul>
      <li><a href="#red">Red</a></li>
      <li><a href="#green" class="not">Green (Ignore)</a></li>
      <li><a href="#blue">Blue</a></li>
      <li><a href="#yellow">Yellow</a></li>
      <li><a href="#pink">Pink</a></li>
      ...
    </ul>
  </nav>
</div>

<!-- Page Sections -->
<div id="red">RED like a fire</div>
<div id="green">GREEN like the forest</div>
<div id="blue">BLUE like the ocean</div>
<div id="yellow">YELLOW like the sun</div>
<div id="pink">PINK like a flower</div>
...

2. Make the positioning navigation sticky and elegance the energetic links as follows:

.header {
  position: sticky;
  top: 0;
}

.header nav ul {
  /* custom list styles */
}

.header nav ul li a.active {
  background-color: #222;
  color: white;
}

3. Load the jquery.scrollspy.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.scrollspy.js"></script>

4. Initialize the plugin, decide the offset component, and specify the menu objects which need to be ignored.

$('.scroll-spy').scrollSpy({
  offsetElement: '.header',
  ignoreAnchors: [ '.not' ],
});

5. Config the smooth scroll behavior.

$('.scroll-spy').scrollSpy({
  offset: 0,
  scrollDuration: 0,
  scrollEasing: 'swing',
});

6. Customize the active class.

$('.scroll-spy').scrollSpy({
  activeClass: 'enabled'
});

7. Define the anchor selectors in a JS array.

$('.scroll-spy').scrollSpy({
  anchors: ['a[href*=\\#]']
});

Easy Scrollspy Navigation, jquery-scrollspy Plugin/Github

See Demo And Download