2017年2月1日 星期三

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

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

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

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

HTML 部分:
  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 就好了。
  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. });  


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...