single page navigation navpoints - Download Single Page Navigation With Scrollspy - jQuery NavPoints

Download Single Page Navigation With Scrollspy – jQuery NavPoints

By Posted on

This time I will share jQuery Plugin and tutorial about Single Page Navigation With Scrollspy – jQuery NavPoints, hope it will help you in programming stack.

single page navigation navpoints - Download Single Page Navigation With Scrollspy - jQuery NavPoints
File Size: 71.8 KB
Views Total: 3899
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

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.

view source
01 <div id="navigation">
02   <div class="container">
03     <nav>
04       <a href="#section1" class="active">Section 1</a>
05       <a href="#section2">Section 2</a>
06       <a href="#section3">Section 3</a>
07     </nav>
08   </div>
09 </div>
10  
11 <section id="section1">
12   Section 1
13 </section
14  
15 <section id="section2">
16   Section 2
17 </section
18  
19 <section id="section3">
20   Section 3
21 </section

2. The example CSS for the single page navigation.

view source
01 #navigation {
02   width: 100%;
03   height: 50px;
04   background-color: #333;
05   position: fixed;
06   top: 0;
07   z-index: 9999;
08 }
09  
10 #navigation a {
11   float: left;
12   display: block;
13   color: #f2f2f2;
14   text-align: center;
15   padding: 15px 16px;
16   text-decoration: none;
17   font-size: 16px;
18 }
19  
20 #navigation a:hover {
21   background-color: #ddd;
22   color: #000;
23 }

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

view source
1 .active {
2   background-color: #4caf50;
3   color: #fff;
4 }

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

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/jquery.navpoints.min.js"></script>

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

view source
1 $(function() {
2   $('#navigation').navpoints();
3 });

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

view source
1 $('#navigation').navpoints({
2   speed: 1000
3 });

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

view source
1 $('#navigation').navpoints({
2   offset: 70
3 });

8. Customize the active class. Default: ‘active’.

view source
1 $('#navigation').navpoints({
2   currentClass: 'active'
3 });

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

view source
1 $('#navigation').navpoints({
2   updateHash: true
3 });

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

view source
1 $('#navigation').navpoints({
2   classToParent: true
3 });

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

source : jquery.net

Related posts: