Single Page Navigation With Scrollspy - jQuery NavPoints

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.

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.

  • Publication date: 25.04.2019
  • Source