Smart Responsive Sticky Navigation Menu With jQuery - stickyNav.js
File Size: | 4.98 KB |
---|---|
Views Total: | 7884 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The stickyNav.js jQuery plugin makes it possible to create a smart, sticky, mobile-friendly navigation menu for your cross-platform web application.
Main features:
- Always sticks the menu to the top when scrolling past it.
- Highlights the active menu item with an animated underline. Aka. scrollspy.
- Collapses the navigation into a drop-down menu on the mobile device.
- Smoothly scroll to specific page sections when clicking menu items.
See It In Action:
How to use it:
1. Create the navigation menu from a normal nav list.
<nav class="stickyMenu clearfix"> <a class="btn btn-menu">Menu</a> <ul> <li><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li><a href="#section-3">Section 3</a></li> </ul> </nav>
2. Create page sections the page should be scrolled to. Note that the ID values must match the anchor links defined in the menu items.
<div id="section-1" class="tracked"> Section 1 </div> <div id="section-2" class="tracked"> Section 2 </div> <div id="section-3" class="tracked"> Section 3 </div> ...
3. Download the plugin and load the main script after jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="stickyNav.js"></script>
4. Initialize the plugin and make the nav menu sticky on scroll.
$('.stickyMenu').smoothMenu({ stickyMenu: true, slidingLine: true });
5. Override the default settings to customize the nav menu.
$('.stickyMenu').smoothMenu({ // animation speed in ms menuSpeedAnimate: 600, pageNavigationSpeedAnimate: 1500, // class selector of menu trigger button btnClassMenu: 'btn-menu', // enable sticky menu stickyMenu: false, // appends this class to sticky menu stickyMenuClassName: 'fixed', // enable sliding line under active menu item slidingLine: false, slidingLineClassName: 'sliding-line', slidingLineClassNameActive: 'active', slidingLineColor: '#fcf8e3', slidingLineHeight: '3px', slidingLineSpeedAnimate: 200, // breakpoint winMobWidth: 500, // css selector of tracked section trackedClassName: 'tracked' });
This awesome jQuery plugin is developed by rajibchandrakarmaker. For more Advanced Usages, please check the demo page or visit the official website.