效果是这样的:
红色部份,地址:http://baike.baidu.com/view/1012721.htm#2
我是这样想的:
在指定的class前面加上<a name="2"></a>
,这个应该可以通过jquery全部收索到吧,然后根据检索到的数量,为改变每个name的值,然后就是右侧的导航了,浮动的,游标再定位,添加相应href。
想请教下有相关的案例不?
我自己找到了一个例子:
http://keimon.iteye.com/blog/1973541
这东西类似Bootstrap中的Affix功能,可以参考一下Bootstrap是怎么实现的(http://getbootstrap.com/javascript/#affix)。
锚点加滚动检测~
1.导航的生成
http://baike.baidu.com/view/1012721.htm#2 这个地址将跳转到这个锚点处,每一个大标题那都有一个锚点,根据锚点自动生成右侧的导航,怎么生成内可以用jquery遍历class="anchor-1"的元素。
2.导航随滚动条自动选中
监听滚动条的滚动事件,当滚动条滚动到锚点时,将对应的导航选中,对应关系可以根据导航的href="#2"与锚点的name="2"来匹配。 关键是如何判断滚动条滚动到锚点,百度百科那边有个固定的导航栏,当某个锚点在导航栏下方小于某个距离的时候可以认为到达该锚点,导航栏选择。