[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'
});

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。