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.2 s; |
This awesome jQuery plugin is developed by LiuLiuniuniu. For more Advanced Usages, please check the demo page or visit the official website.