动画部分指示器使用<ul>像twitter bootstrap </ul>

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类，并在用户向下滚动页面时分配。