Navigation ScrollSpy & Smooth Scroll Plugin - nav-scroll-spy.js
File Size: | 11.9 KB |
---|---|
Views Total: | 5520 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A small yet useful jQuery scrollspy and smooth scroll plugin for site navigation that allows you to highlight the active item in the menu and smoothly scroll through the webpage.
Features:
- Highlights menu items to indicate the page section you are currently looking at.
- Smoothly scroll the page to sections as you click the menu items.
How to use it:
1. Create the site navigation and page sections as follows:
<ul class="nav-group"> <li class="nav-item active">Item 1</li> <li class="nav-item">Item 2</li> <li class="nav-item">Item 3</li> ... </ul> <div class="container"> <div class="spy-item">Section 1</div> <div class="spy-item">Section 2</div> <div class="spy-item">Section 3</div> ... </ul>
2. Load the main JavaScript file jq.nav-scroll-spy.js
after the latest jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="jq.nav-scroll-spy.js"></script>
3. Call the function and the plugin will do the rest.
$(document).jqNavScrollSpy();
4. Change the default duration of the smooth scroll animation.
$(document).jqNavScrollSpy({ speed: 550 // in ms });
5. Override the default easing effect. For more easing functions, load jQuery easing plugin or jQuery UI library in your document.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
$(document).jqNavScrollSpy({ easing: 'easeInOutBack' // default 'swing' });
6. Default selectors.
$(document).jqNavScrollSpy({ navItems: '.nav-item', scrollContainer: 'html,body', spyItems: '.spy-item' });
7. Apply your own CSS styles to the active menu item.
.nav-item.active{ background-color: #222; color: #fff; }
This awesome jQuery plugin is developed by huxinmin. For more Advanced Usages, please check the demo page or visit the official website.