Easy Scrollspy Navigation In jQuery - scrollspy.js

An easy yet fully customizable jQuery scrollspy navigation plugin that highlights active links of your site navigation as the user scrolls to the corresponding section.

How to use it:

1. Create a site navigation that contains anchor links pointing to sections of your 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 site navigation sticky and style the active 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, determine the offset element, and specify the menu items which should be ignored.

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

5. Config the smooth scroll behavor.

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

6. Customize the active class. Default: 'active'.

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

7. Define the anchor selectors in a JS array .

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

---

This awesome jQuery plugin is developed by media4motion. For more Advanced Usages, please check the demo page or visit the official website.