bootstrap组件的导航侧边栏+动画部分指示器

Question

我已经尝试了几周来构建像这些图像一样的导航边栏：

我正在使用twitter bootstrap，但是，即使他们的getbootstrap.com/components有一个非常好看的导航边栏，他们的库中也没有这样的组件，构建一个组件非常痛苦。因此，我尝试使用jquery来构建像Tommy Hilfiger这样的全球网站。

Tommy Hilfiger's Global Site

然而，我是javascript和css的新手...他们是我的弱点......特别是如果他们被缩小了:(我坚持试图制作箭头标记并让它移动（动画）并始终指向当前部分。我设法为页面滚动设置动画，到目前为止我的WIP在这里：

WIP - Twitter Bootstrap Navigation Sidebar

是否有任何开源组件（或最好是自举组件）来实现该节指示动画？

我对我的脚本越来越混乱，因此开源组件非常需要，但是，如何实现它的任何输入（请使用脚本示例）也将受到赞赏..非常感谢你们前进！<​​/ p>

Answer 1

查看ScrollSpy，该组件存在于bootstrap本身：

bootstrap scrollspy

摘自：

https://stackoverflow.com/a/14366014/474330

所以你需要使用这里描述的滚动间谍activate事件： http://twitter.github.com/bootstrap/javascript.html#scrollspy

基本上你需要一些像这样的代码：

$(function() {
  var $spy = $('.nav.nav-pills');
  $spy.scrollspy({offset: 20});
  $spy.bind("activate", function(e) {
    // do stuff here when a new section is in view
  });
});

这是一个工作示例： http://jsfiddle.net/hajpoj/f2z6u/3/

请忽略它从底部开始的事实......不确定是否是一个无关或相关的错误，但重点是你可以看到激活事件是如何工作的