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

Question

几周来我一直在尝试构建像这些图像一样的导航侧边栏:

我正在使用 twitter bootstrap，但是，尽管他们的 getbootstrap.com/components 有一个非常漂亮的导航侧边栏，但他们的库中没有这样的组件，而且构建一个非常痛苦。因此，我尝试使用 jquery 来构建一个像 Tommy Hilfiger 的全局站点。

Tommy Hilfiger's Global Site

但是，我是 javascript 和 css 的新手......它们是我的弱点......特别是如果它们被缩小了:(而且我一直在尝试制作箭头标记并让它移动(动画)并始终指向当前部分。不过，我设法为页面滚动设置了动画，到目前为止，我的 WIP 在这里:

WIP - Twitter Bootstrap Navigation Sidebar

是否有任何开源组件(或最好是 Bootstrap 组件)来实现该部分指示器动画？

我对我的脚本越来越困惑感到很困惑，所以开源组件是非常可取的，但是，任何关于如何实现它的输入(请使用脚本示例)也将不胜感激。非常感谢你前进!<​​/p>

Answer 1

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

bootstrap scrollspy

摘自:

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

因此您需要使用此处描述的滚动 spy 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/

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