This time I will share jQuery Plugin and tutorial about jQuery Based Sticky Navigation with Smooth Scroll Support – stickynav, hope it will help you in programming stack.
Just another jQuery sticky navigation plugin that features smooth scroll and smart anchor link highlighting.
Features:
- Stick your navigation to the top of the browser window.
- Smoothly scroll to specified content section as you click on anchor links.
- Auto highlight anchor links based on scroll position.
How to use it:
1. Download the jQuery stickynav plugin and place the stickynav.js script after jQuery JavaScript library.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/stickynav.js"></script> |
2. Create a site navigation with anchor links pointing to the content sections of your web page.
04 |
<li><a id="nav_section1" class="active" href="#section_1">Section 1</a></li> |
05 |
<li><a id="nav_section2" href="#section_2">Section 2</a></li> |
06 |
<li><a id="nav_section3" href="#section_3">Section 3</a></li> |
07 |
<li><a id="nav_section4" href="#section_4">Section 4</a></li> |
10 |
<div class="section" id="section_1" style="color: #333333"> |
13 |
<div class="section" id="section_2" style="color: #474747"> |
16 |
<div class="section" id="section_3" style="color: #848484"> |
19 |
<div class="section" id="section_4" style="color: #c1c1c1"> |
3. Make the site navigation sticky at the top of the web page.
This awesome jQuery plugin is developed by alexandraestrada. For more Advanced Usages, please check the demo page or visit the official website.
