Single Page Navigation With Scrollspy - jQuery NavPoints

The NavPoints jQuery plugin helps developers to create a sticky navigation for single page web apps, with support for smooth scroll, active highlighting and hash change.

How to use it:

1. Create the html for the single page navigation containing anchor links that point to different sections within the document.

<div id="navigation">
  <div class="container">
    <nav>
      <a href="#section1" class="active">Section 1</a>
      <a href="#section2">Section 2</a>
      <a href="#section3">Section 3</a>
    </nav>
  </div>
</div>

<section id="section1">
  Section 1
</section

<section id="section2">
  Section 2
</section

<section id="section3">
  Section 3
</section

2. The example CSS for the single page navigation.

#navigation {
  width: 100%;
  height: 50px;
  background-color: #333;
  position: fixed;
  top: 0;
  z-index: 9999;
}

#navigation a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px 16px;
  text-decoration: none;
  font-size: 16px;
}

#navigation a:hover {
  background-color: #ddd;
  color: #000;
}

3. Highlight the active menu items when you scroll through page sections.

.active {
  background-color: #4caf50;
  color: #fff;
}

4. Import jQuery JavaScript library and the jQuery NavPoints plugin into the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.navpoints.min.js"></script>

5. Attach the plugin to the single page navigation on document ready. Done.

$(function() {
  $('#navigation').navpoints();
});

6. Customize the animation speed when smoothly scrolling through page sections. Default: 300ms.

$('#navigation').navpoints({
  speed: 1000
});

7. Specify how far down the page section is from the top after scrolling. Default: 0.

$('#navigation').navpoints({
  offset: 70
});

8. Customize the active class. Default: 'active'.

$('#navigation').navpoints({
  currentClass: 'active'
});

9. Determine whether to update the URL hash on scroll. Default: false.

$('#navigation').navpoints({
  updateHash: true
});

10. Determine whether to apply the active class to the parent container rather than nav links. Default: false.

$('#navigation').navpoints({
  classToParent: true
});

---

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