首页 > 百度百科右侧文档导航条是怎么做的?

百度百科右侧文档导航条是怎么做的?

效果是这样的:

红色部份,地址: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"来匹配。 关键是如何判断滚动条滚动到锚点,百度百科那边有个固定的导航栏,当某个锚点在导航栏下方小于某个距离的时候可以认为到达该锚点,导航栏选择。

【热门文章】
【热门文章】