This time I will share jQuery Plugin and tutorial about Smart One Page Scroll Navigation Plugin With jQuery – alfaNavbar, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="alfaNavbar.js"></script> |
3 |
<link href="alfaNavbar.css" rel="stylesheet"/> |
2. Create a sidebar navigation list that contains anchor links pointing to the content sections within the document.
02 |
<div class="alfaDotNavbar"> |
04 |
<li><a href="#one"><span>One</span></a></li> |
05 |
<li><a href="#two"><span>Two</span></a></li> |
06 |
<li><a href="#three"><span>Three</span></a></li> |
07 |
<li><a href="#four"><span>Four</span></a></li> |
08 |
<li><a href="#five"><span>Five</span></a></li> |
11 |
<div class="block" id="one"># 1</div> |
12 |
<div class="block" id="two"># 2</div> |
13 |
<div class="block" id="three"># 3</div> |
14 |
<div class="block" id="four"># 4</div> |
15 |
<div class="block" id="five""># 5</div> |
3. Create a top navigation for the sectioned content.
1 |
<div class="alfaTopNavbar"> |
3 |
<li><a href="#one">One</a></li> |
4 |
<li><a href="#two">Two</a></li> |
5 |
<li><a href="#three">Three</a></li> |
6 |
<li><a href="#four">Four</a></li> |
7 |
<li><a href="#five">Five</a></li> |
4. Active the navigation controls as these:
1 |
$('.alfaDotNavbar').alfaNavbar({ type: 'dotted', threshold: 'center' }); |
2 |
$('.alfaTopNavbar').alfaNavbar({ type: 'topped', threshold: 'center' }); |
5. Default plugin options.
01 |
$('.alfaDotNavbar').alfaDotNavbar({ |
07 |
activeClass: 'active', |
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.
