[jQuery Plugin] onepageNav.js 選單與捲動位置的互動效果

一夜式的網站很喜歡做點了選單後會移至該處的效果，而如果捲動頁面，選單也會切換當前移動到了哪邊，這個在前端可以把它稱之為 Scrollspy，具體的效果可以看我的網站。

這隻 onepageNav.js 就是可以用來簡單製作互動效果的套件，這隻是 jQuery 的，所以要先讀入 jQuery 後再讀取這隻 plugin。

接著配置 html ，分為選單和頁面的部分。

<div class="nav-wrap">
  <ul id="onepage-nav">
    <li><a class="scroll" href="#home">Home</a></li>
    <li><a class="scroll" href="#about">About</a></li>
    <li><a class="scroll" href="#contact">Contact</a></li>
  </ul>
</div>

<div id="home" class="section">
  Home Section
</div>
<div id="about" class="section">
  About Section
</div>
<div id="more" class="section">
  More Section
</div>

接著觸發 plugin 即可：

jQuery('.scroll').onePgaeNav({
  wrapper: '#onepage-nav'
});