jQuery Plugin for a ScrollSpy Navigation | scrollspy.js


jquery-scrollspy is an easy but fully customizable scroll spy navigation plugin that highlights active links to navigate your site as the user scrolls to the corresponding section.

scrollspy jquery example, scrollspy using jquery, scrollspy javascript, scrollspy javascript example, smooth scrollspy, scrollspy css, scrollspy library

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

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

5. Config the smooth scroll behavior.

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

6. Customize the active class.

  activeClass: 'enabled'

7. Define the anchor selectors in a JS array.

  anchors: ['a[href*=\\#]']

Easy Scrollspy Navigation, jquery-scrollspy Plugin/Github

See Demo And Download

Official Website(media4motion): Click Here

This superior jQuery/javascript plugin is developed by media4motion. For extra Advanced Usages, please go to the official website.