[jQuery Plugin] 依據捲動位置 highlight 選單- jQuery-One-Page-Nav

有些時候會遇到在單頁會塞不少資訊的狀況，另外會有選單可以切換到每一個區塊，如果需要在按下選單或滾動的時候 highlight 選單目前位置，可以使用這一個 plugin jQuery-One-Page-Nav。

外掛位置:
jQuery-One-Page-Nav

再來只要參考官方給的參考範例修改即可。

HTML 部分:

view plaincopy to clipboardprint

1. <ul id="nav">  
2.     <li class="current"><a href="#section-1">Section 1</a></li>  
3.     <li><a href="#section-2">Section 2</a></li>  
4.     <li><a href="#section-3">Section 3</a></li>  
5. </ul>  
6.   
7. <div id="section-1">  
8.     <strong>Section 1</strong>  
9.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
10. </div>  
11.   
12. <div id="section-2">  
13.     <strong>Section 2</strong>  
14.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
15. </div>  
16.   
17. <div id="section-3">  
18.     <strong>Section 3</strong>  
19.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
20. </div>  

js 部分，主要是指定選單是哪個，並注意選單的 href 要對應 html 的 id 就好了。

view plaincopy to clipboardprint

1. $('#nav').onePageNav({   
2.     currentClass: 'current',   
3.     changeHash: false,   
4.     scrollSpeed: 750,   
5.     scrollThreshold: 0.5,   
6.     filter: '',   
7.     easing: 'swing',   
8.     begin: function() {   
9.         //I get fired when the animation is starting   
10.     },   
11.     end: function() {   
12.         //I get fired when the animation is ending   
13.     },   
14.     scrollChange: function($currentListItem) {   
15.         //I get fired when you enter a section and I pass the list item of the section   
16.     }   
17. });