1

几个星期以来，我一直在尝试构建像这些图像这样的导航侧边栏：

Tommy Hilfiger 的左侧导航侧边栏

新加坡国庆阅兵 2013 右侧导航侧边栏

Getbootstrap 的左侧导航侧边栏

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

Tommy Hilfiger 的全球网站

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

WIP - Twitter Bootstrap 导航侧边栏

是否有任何开源组件（或者最好是引导程序）来实现该部分指示器动画？

我对我的脚本变得越来越混乱感到很困惑，因此非常需要开源组件，但是，任何有关如何实现它的输入（请提供脚本示例）也将不胜感激。非常感谢您提前！

4

1 回答 1

1

查看 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/

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

于 2013-08-10T00:37:31.113 回答