Easy Scrollspy Navigation In jQuery - scrollspy.js

File Size: 5.45 KB
Views Total: 2347
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
      <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>

<!-- 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.

  offsetElement: '.header',
  ignoreAnchors: [ '.not' ],

5. Config the smooth scroll behavor.

  offset: 0,
  scrollDuration: 0,
  scrollEasing: 'swing',

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

  activeClass: 'enabled'

7. Define the anchor selectors in a JS array .

  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.