Smart One Page Scroll Navigation Plugin With jQuery - alfaNavbar
File Size: | 16.1 KB |
---|---|
Views Total: | 1915 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
alfaNavbar is a jQuery plugin that helps generate smart sidebar and sticky top navigation controls for your one page scrolling website. Clicking on the navigation links will navigate between content sections with a smooth page scroll animation. The top navigation menu will auto show/hide when you scroll up/down the webpage.
How to use it:
1. Add jQuery library and the jQuery alfaNavbar plugin's files to the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="alfaNavbar.js"></script> <link href="alfaNavbar.css" rel="stylesheet"/>
2. Create a sidebar navigation list that contains anchor links pointing to the content sections within the document.
<div> <div class="alfaDotNavbar"> <ul> <li><a href="#one"><span>One</span></a></li> <li><a href="#two"><span>Two</span></a></li> <li><a href="#three"><span>Three</span></a></li> <li><a href="#four"><span>Four</span></a></li> <li><a href="#five"><span>Five</span></a></li> </ul> </div> <div class="block" id="one"># 1</div> <div class="block" id="two"># 2</div> <div class="block" id="three"># 3</div> <div class="block" id="four"># 4</div> <div class="block" id="five""># 5</div> </div>
3. Create a top navigation for the sectioned content.
<div class="alfaTopNavbar"> <ul> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#four">Four</a></li> <li><a href="#five">Five</a></li> </ul> </div>
4. Active the navigation controls as these:
$('.alfaDotNavbar').alfaNavbar({ type: 'dotted', threshold: 'center' }); $('.alfaTopNavbar').alfaNavbar({ type: 'topped', threshold: 'center' });
5. Default plugin options.
$('.alfaDotNavbar').alfaDotNavbar({ // animation speed speed: 1000, // CSS class for active link activeClass: 'active', // scroll threshold threshold: 0, });
Change log:
2017-04-03
- Change behaviour fixed action in `topped`
This awesome jQuery plugin is developed by hezymal. For more Advanced Usages, please check the demo page or visit the official website.