html - 动画部分指示器使用像推特引导

Question

我正在使用 twitter bootstrap 并且有一个很长的页面，我分为多个部分。

我想在屏幕左上角实现一个部分指示器，它始终显示读者当前正在阅读的位置，如下面的屏幕截图：

我设法正确地获得了布局，如下所示：

但是，我遇到了一些我已经工作了几个星期但仍然无法解决的问题：

1. 如何在用户滚动时动态标记当前部分
2. 如何动画箭头从源到下一个的移动
3. （或者直接到目的地，如果读者点击更远的地方
4. 而不是滚动）

我已经尝试使用 getbootstrap.com/components 中的更简单版本，但仍然无济于事......请帮助......这非常有压力，因为我在 javascript 和 css 方面特别薄弱:(

编辑：

总结一下答案：

看看这个库：

https://github.com/davist11/jQuery-One-Page-Nav.git

Answer 1

对于单页网站，请查看单页导航插件http://trevordavis.net/blog/jquery-one-page-navigation-plugin。它在单击和用户向下滚动页面时为当前菜单项分配一个 css 类。