scrollnav.js- 輕便的一頁式網站偵測捲動位置切換選單選項外掛

分享:

scrollnav.js 是一個打著輕便的一頁式網站偵測捲動位置切換選單選項的 javascript 外掛。

只要透過讀入 js:

<script src="https://unpkg.com/[email protected]/dist/scrollnav.min.umd.js"></script>

接著設置好對應的連結與區塊:

<nav class="scroll-nav">
  <ol class="scroll-nav__list">
    <li class="scroll-nav__item">
      <a class="scroll-nav__link" href="#scroll-nav__1">
        First heading
      <a>
    </li>
    ...
  </ol>
</nav>
<div class="main-content">
  <h2 id="scroll-nav__1">First Heading</h2>
  ...
</div>

 

再初始化 js 就完成了。

const content = document.querySelector('.main-content');
scrollnav.init(content);

 

DEMO 頁

 

課程推薦

和我們交流

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