Sticky In-page Navigation (TOC) Plugin - jQuery stickyNavigator

File Size: 54.4 KB
Views Total: 1832
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sticky In-page Navigation (TOC) Plugin - jQuery stickyNavigator

stickyNavigator is a jQuery plugin that helps you to create a sticky in-page navigation (table of contents) from specific heading tags within the document.

Click the anchor links in the navigation to smoothly scroll to associated heading elements on the page.

Additionally, it allows you to automatically highlight the current section on page scroll just like the scrollspy.

You can find more table of contents here: 10 Best Table Of Contents JavaScript Plugins.

How to use it:

1. Load the main script jquery-stickyNavigator.js after loading jQuery library.

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

2. Create a container to place the table of contents.

<div id="sticky-navigator">
</div>

3. Call the function on the container. By default the plugin looks for all h2 and h3 heading tags in the document and dynamically generates a table of contents inside the container element you just created.

$('#sticky-navigator').stickyNavigator({
  // options here
});

4. Make the navigation sticky using the position: sticky property.

#sticky-navigator {
  position: -webkit-sticky;
  position: sticky;
  top: 5px;
}

5. Determine the target container where the plugin looks for heading elements. Default: the whole body.

$('#sticky-navigator').stickyNavigator({
  wrapselector: '.myArticle'
});

6. Determine the heading tags used for your table of contents. Default: 'h2, h3'

$('#sticky-navigator').stickyNavigator({
  targetselector: "h2,h3,h4"
});

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