This time I will share jQuery Plugin and tutorial about Fixed In-page Navigation With ScrollSpy – jQuery Right-Nav, hope it will help you in programming stack.
The Right-Nav jQuery plugin automatically generates a floating in-page navigation panel containing internal links generated from heading elements within the document.
The goal of the plugin is to provide a user- and SEO-friendly in-page navigation experience (aka: table of contents) by combining the Affix and ScrollSpy functionalities.
How It Works:
- Search through all heading elements within the document.
- Add unique IDs to heading elements.
- Generates anchor links pointing to the heading elements.
- Add an ‘Active’ class to the current menu item when you scrolled to the related content.
How to use it:
1. Create an empty unordered list to place the in-page navigation.
1 |
<ul class="right-nav" id="right-nav-box"> |
2. Load the main JavaScript file right-nav.js after jQuery.
1 |
<script src="//code.jquery.com/jquery.min.js></script> |
2 |
<script src="js/right-nav.js"></script> |
3. The example CSS styles for the in-page navigation.
01 |
.right-nav::-webkit-scrollbar { |
06 |
.right-nav::-webkit-scrollbar-track { |
08 |
background:rgba(0,0,0,0.06); |
09 |
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.08); |
12 |
.right-nav::-webkit-scrollbar-thumb { |
14 |
background:rgba(0,0,0,0.12); |
15 |
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.2); |
24 |
background-color:#eee; |
43 |
text-overflow:ellipsis; |
49 |
background-color:#fff; |
50 |
transition:all ease 0.2s; |
This awesome jQuery plugin is developed by LiuLiuniuniu. For more Advanced Usages, please check the demo page or visit the official website.
