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