Sticky Navigation With Smooth Scroll And Scroll Spy - jQuery sticky-nav
File Size: | 230 KB |
---|---|
Views Total: | 6618 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A multi-purpose jQuery site navigation plugin to create a sticky navigation with smooth scroll and scroll spy functionalities for your single page web application.
Features:
- Sticky navigation. Always keeps the navigation stick to the top of the webpage when scrolling down.
- Scrollspy: Activates menu items on scroll.
- Smooth scroll: Smoothly scroll to page sections on click.
How to use it:
1. Create a header navigation that contains anchor links pointing to the page sections within the document.
<nav> <ul> <li><a href="#section1">section 1</a></li> <li><a href="#section2">section 2</a></li> <li><a href="#section3">section 3</a></li> </ul> </nav> <section id="section1"> Section 1 </section> <section id="section2"> Section 2 </section> <section id="section3"> Section 3 </section>
2. Include jQuery library and the JavaScript jquery.sticky-nav.js
at the bottom of the webpage.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/jquery.sticky-nav.js"></script>
3. Initialize the plugin on the header navigation.
$(document).ready(function() { $('nav').stickynav(); });
4. Make the header navigatio stick to the top of the webpage using CSS. The plugin automatically adds the class .sticky
to the navigation when you scroll down the webpage.
nav { background: #000; margin: 0; overflow: hidden; padding: 0; position: absolute; top: 0; } nav.sticky { position: fixed; }
5. Customize the styles of the activated menu items.
nav ul li a.active { background: #ff6e6f; }
6. All default selectors:
// Selected nav item modifier class navActiveClass: 'active', // Sticky nav modifier class navStickyClass: 'sticky', // Section id, class or tag selector sectionSelector: 'section'
Changelog:
v1.1.0 (2018-07-08)
- Add offset 0
This awesome jQuery plugin is developed by fedecarg. For more Advanced Usages, please check the demo page or visit the official website.