Smart One Page Scroll Navigation Plugin With jQuery - alfaNavbar

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.