📌  相关文章
📜  scrollspyNav 反应 - Javascript (1)

📅  最后修改于: 2023-12-03 15:20:01.992000             🧑  作者: Mango

Javascript - scrollspyNav

简介

scrollspyNav是一种Javascript插件，可以在用户滚动页面时根据目标区域的滚动位置自动更新导航栏。这样，用户就可以在页面上浏览时随时了解当前所在的位置。

如何实现
引入插件
<html>
  <head>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    <!-- 引入scrollspyNav插件 -->
    <script src="https://cdn.jsdelivr.net/npm/scrollspyNav@1.3.3/dist/scrollspyNav.min.js"></script>
  </head>
  <body>
    <!-- 你的HTML代码 -->
    <nav>
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
    <section id="section1">...</section>
    <section id="section2">...</section>
    <section id="section3">...</section>
  </body>
</html>
初始化插件
<script>
  $(function() {
    $.scrollspyNav();
  });
</script>
设置选项
<script>
  $(function() {
    $.scrollspyNav({
      sections: 'section', // 要监视的区域
      subSections: false // 是否监视子区域
    });
  });
</script>
选项
sections

要监视的区域，默认为所有body子元素。

subSections

是否监视子区域。默认为false。

activeClasses

激活区域时应用的CSS类。默认为active。

scrollTo

滚动到区域时使用的选项。可以是一个数字(像素)，表示滚动的距离，也可以是一个字符串，表示目标元素的id。

scrollBy

滚动时使用的选项。可以是一个数字(像素)，也可以是一个函数。函数应该返回一个数字，在滚动前计算。

结论

scrollspyNav是一个非常有用的工具，可以为用户提供更好的导航体验。虽然它不是一个核心库的一部分，但它是一个不错的插件，可以轻松地启用并调整选项。