一个通用的jQuery插件可以帮助您创建易于导航的登录页、投资组合网站和单页web应用程序。

特征：

• 粘性标题导航：确保标题或导航栏在滚动时保持可见。
• 平滑滚动：当用户单击菜单项时，启用对特定内容部分的平滑和动画滚动。
• Scrollspy：根据用户的滚动位置自动高亮显示菜单项，提供当前查看部分的清晰指示。

如何使用它:

1.将Stoocky Page插件的缩小版添加到页面中。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.stoocky-page.js"></script>

2.创建一个导航列表，其中包含指向内容部分的锚链接。

<nav>
  <ul class="main-menu">
    <li>
      <a href="javascript:;" data-item="section-1">Section 2</a>
    </li>
    <li>
      <a href="javascript:;" data-item="section-2">Section 2</a>
    </li>
    <li>
      <a href="javascript:;" data-item="section-3">Section 2</a>
    </li>
  </ul>
</nav>

<section id="section-1">
  Section 1
</section>
<section id="section-2">
  Section 2
</section>
<section id="section-3">
  Section 3
</section>
...

3.初始化插件。

$(function(){ 
  $('body').stoockyPage();
});

4.必要的CSS样式。

/* make the header nav sticky on scroll */
 .header {
  position: absolute;
}
 
.header.header--fixed {
  position: fixed;
  top: 0;
}
 
/* active styles */
.main-menu > li > a.active {
  color: blue;
}

5.可用的插件选项。

$('body').stoockyPage({
  stickyElem   : {
    active            : true,
    elToFix           : 'header',
    classToFix        : 'header--fixed'
  },
  scrollToElem    : {
    active            : true,
    item              : '.main-menu > li > a',
    animDuration      : 1000,
  },
  itemHighlighter : {
    active            : true,
    item              : '.main-menu > li > a',
    lastItem          : '.main-menu > li:last-child > a',
    classToHighlight  : 'active'
  }
});

预览截图

粘滞标题+平滑滚动+滚动间谍=堆叠页面