Sticky One Page Scroll Navigation Plugin With jQuery - Section Navigator

Section Navigator is a jQuery plugin to generate a fixed navigation menu for your one page scrolling website that has the ability to indicate on which section you're viewing as well as navigating between content sections by click on the menu items.

How to use it:

1. Create the html for the section navigator.

<div class="dot-navigation-block">
  <ul class="_list">
    <li class="active">
      <a href="#section1"><span class="__circle">&nbsp;</span> Section 1</a>
    </li>
    <li>
      <a href="#section2"><span class="__circle">&nbsp;</span> Section 2</a>
    </li>
    <li>
      <a href="#section3"><span class="__circle">&nbsp;</span> Section 3</a>
    </li>
    <li>
      <a href="#section4"><span class="__circle">&nbsp;</span> Section 4</a>
    </li>
    <li>
      <a href="#section5"><span class="__circle">&nbsp;</span> Section 5</a>
    </li>
  </ul>
</div>

2. The main CSS to style the section navigator.

.dot-navigation-block {
  position: fixed;
  top: 200px;
  left: 50px;
  z-index: 2;
  padding: 10px 20px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 4px
}

.dot-navigation-block ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.dot-navigation-block ul li {
  display: block;
  margin: 10px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3)
}

.dot-navigation-block ul li a {
  color: #fff;
  display: inline-block;
  text-decoration: none
}

.dot-navigation-block ul li a .__circle {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
  background-color: #fff;
  border: 2px solid #43A047;
  border-radius: 50em;
  position: relative;
  top: 2px
}

.dot-navigation-block ul li.active .__circle {
  background-color: #43A047;
  border-color: #fff
}

3. Don't forget to load the latest version of jQuery library at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>

4. The main function to check the position on window scroll.

function checkScrollPosition(){
  var navBlock = $('.dot-navigation-block');
  var scrollPos = $(document).scrollTop();
  navBlock.find('a').each(function(){
    // If window was move over block positon
    var block = $( $(this).attr('href') );
    if ( (block.position().top) <= scrollPos+5 && (block.position().top) + block.height() > scrollPos+5 ) {
      // remove all active class and add active to the only one we want
      navBlock.find('li').removeClass('active');
      $(this).parent('li').addClass('active');
    }else{
      $(this).parent('li').removeClass('active');
    }
  });
}

$(window).on('scroll', function(){
  checkScrollPosition();
});

5. The jQuery script to active the section navigator.

$(document).ready(function(){
  var navBlock = $('.dot-navigation-block');
  navBlock.find('a').on('click', function(e){
    e.preventDefault();
    $(document).off('scroll');
    // Get block distance from top of browser
    var block = $(this).attr('href');
    var blockPosition = $(block).offset().top;
    // Animate window to that position
    $('html, body').animate({
      scrollTop: blockPosition
    }, 600, 'swing', function(){
      checkScrollPosition();
    });
  });
});

---

This awesome jQuery plugin is developed by jir4yu. For more Advanced Usages, please check the demo page or visit the official website.