先给你看效果图，看看是不是你想要达到的效果。如果您满意，请查看本文的详细内容。同时可以下载源代码。

渲染：

下载效果显示源代码。

代码：

百度百科右导航代码的jquery插件，这个百科右导航的js代码，很久以前才刚刚使用。因为这个导航特别适合长文档，所以花了半天时间才写出这个百科导航的插件。但是和百度百科相比还是有点弱，没有实现滚动右导航区的功能。如果你的文档不是超级变态，应该就够了。

如果你的导航超级长，你可能需要使用侧面导航页面滚动，但通常你不需要。等到你有了好主意以后再去实现。暂时没有想到一个好的方法来实现右导航区和左内容的滚动和联动。

注：var目录导航=新目录导航($ ('h2，h3 ')，{ })；H2，h3' in是生成两级导航的内容节点。

/* *模仿百度百科右侧的导航代码——页面目录结构的导航v 0.01 *只写两级，但是无限级就可以了，这是逻辑级。html结构都在同一级别* css3过渡动画用于滑动标记动画，不支持的浏览器没有动画效果。*与百度百科相比，还是比较弱的。你可以滚动而不实现右边的功能*/功能目录nav ($ h，config){这个。opts=$。在浏览器窗口中间扩展(true，{scrollthreshold 33600.5，//滚动检测阈值0.5，scrollSpeed:700。//滚动到指定位置的动画时间为：500。//当滚动条远离顶部时，将显示导航eas :‘swing’。//延迟检测3360200不再解释。//延迟检测将被延迟，以避免滚动期间检测过于频繁。滚动更改3360函数(){}}，config)；这个。$win=$(窗口)；这个。$ h=$ h这个。$ pageNavList=这个。$ pageNavListLis=这个。$ curTag=这个。$ pageNavListLiH=this . offrr=[]；this . curindex=0；this.scrollIng=falsethis . init()；} directorynav . prototype={ init : function(){ this . make()；this . setarr()；this . BindEvent()；}，make:function(){ //生成导航目录结构，导航目录结构是自己根据需求生成的。

如果你直接在页面中输出一个结构那也挺好不用搞js $(“正文”).追加(' div class=' directory-nav ' id=' directoryNav ' ul/ulspan class=' cur-tag '/span span class=' c-top '/span span class=' c-bottom '/span span class=' line '/span/div ')；var $hs=这个$h，$directoryNav=$('#directoryNav ')，temp=[]，index1=0，index 2=0；$hs .每个(函数（索引){ var $this=$(this)，text=$ this。text()；如果(这个。标记名。tolowercase()==' H2 '){索引1；if(索引1% 2==0)索引2=0；在…之时push(' Li '=' L1 ' span=' c-dot '/span ' index 1 ' .a class=“-text”“text”/a/Li’)；} else { index 2 temp . push(' Li class=' L2 ' ' index 1 ' .索引2 ' a class=' text ' ' text '/a/Li ')；} });$directoryNav.find('ul ').html(临时。联接(" ")；//设置变量这个$ pageNavList=$ directoryNav这个$ pageNavListLis=this .$ PageNavList。find(' Li ')；这个$curTag=这个$pageNavList.find(' .cur-tag’)；这个$pageNavListLiH=这个$ page navtlistlis . eq(0).高度();if(！这个。选择。scroltopborder){这个.$ PageNavList。show()；} }，setarr :函数(){ var This=This这个$ h .每个(函数(){ var $ this=$(this)，OfT=Math。圆的(这个。偏移量().顶部);这个。OfRR。push(OFt)；});}，posTag:function(上){这个.$ curtag。CSS({ top : top ' px ' })；}，ifpos :函数(ST){ var offrr=this。offrr//控制台。日志(ST)；var windowHeight=Math.round(这$ win。高度()*这个。选择。滚动阈值)；for(var I=0；ioffarr . lengthi){ if((ofrr[I]-窗高)ST){ var $ Curli=this .$pageNavListLis.eq(i)，tagTop=$curLi.position().顶部；$curLi.addClass('cur ').兄弟姐妹('里').移除CLaSS(' cur ')；这个。curindex=I；this.posTag(tagTop this .$ pageNavListLiH * 0.5)；//this.curIndex=this .$pageNavListLis.filter(' .cur ').index()；这个。选择。滚动更改。叫(这个)；} } }，Bindevent : FuncTion(){ var This=This，show=false，timer=0；这个$win.on('scroll '，function(){ var $ this=$(this)；clearTimeout(计时器);timer=setTimeout(函数(){ this。滚动=真；if($这个。滚动顶部()。这个。选择。滚动上边框){ if(！这个$ pageNavListLiH)这$ pageNavListLiH=这$ page navtlistlis . eq(0).高度();if(！显示){这$ PageNavList。FadeIn()；show=true} This.ifPos($(this).滚动顶部())；}否则{如果(显示){这.$ PageNavList。fade out()；show=false} } }，这。选择。延迟检测)；});这个$pageNavlist.on('click '，' Li '，function(){ var $this=$(this)，index=$ this。index()；这个。滚动到(这个。oferr[index])；}) }，scrollTo:函数（偏移量，回调){ var This=this$('html，body ').动画({ scrollTop: offset }，this.opts.scrollSpeed，this.opts.easing，function(){ this。滚动=假；//修正弹两次回调蛋疼回调这个。标记名。tolowercase()==' body '回调();});} };//调用实例化var directoryNav=new directoryNav($(' H2，h3 ')，{ scroltopborder :0//滚动条距离顶部多少的时候显示导航，如果为0,则一直显示});在写百度百科右侧导航射流研究…代码的时候有个想法，就是让右侧导航区域的滚动条和左侧内容的滚动条用一个计算公式让他们关联起来，实现同步滚动。