首页 / 脚本样式 / JavaScript / jquery仿百度百科底部浮动导航特效

 * {margin: 0;padding: 0}.wrap {width: 1000px;overflow: hidden;margin: 0 auto;}.content {width: 780px;float: left;}.slide {width: 200px;float: right;}

<div class="wrap"><div class="content"><h2 class="headline-1"><a class="anchor-1" name="1"></a><span class="headline-1-index">1</span><span class="headline-content">part1</span></h2><div class="para">content1,content1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="2"></a><span class="headline-2-index">2</span><span class="headline-content">part2</span></h2><div class="para">content2,content2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-2"><a class="anchor-2" name="2-1"></a><！--<span class="headline-2-index">2-1</span>--><span class="headline-content">part2-1</span></h2><div class="para">content2-1,content2-1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-2"><a class="anchor-2" name="2-2"></a><！--<span class="headline-1-index">2-2</span>--><span class="headline-content">part2-2</span></h2><div class="para">content2-2,content2-2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="3"></a><span class="headline-1-index">3</span><span class="headline-content">part3</span></h2><div class="para3">content,content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="4"></a><span class="headline-1-index">4</span><span class="headline-content">part4</span></h2><div class="para4">content,content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="5"></a><span class="headline-1-index">5</span><span class="headline-content">part5</span></h2><div class="para">content5,content5<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="6"></a><span class="headline-1-index">6</span><span class="headline-content">part6</span></h2><div class="para">content6,content6<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="7"></a><span class="headline-1-index">7</span><span class="headline-content">part7</span></h2><div class="para">content7,content7<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="8"></a><span class="headline-1-index">8</span><span class="headline-content">part8</span></h2><div class="para">content8,content8<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="9"></a><span class="headline-1-index">9</span><span class="headline-content">part9</span></h2><div class="para">content9,content9<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="10"></a><span class="headline-1-index">10</span><span class="headline-content">part10</span></h2><div class="para">content10,content10<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="11"></a><span class="headline-1-index">11</span><span class="headline-content">part11</span></h2><div class="para">content11,content11<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="12"></a><span class="headline-1-index">12</span><span class="headline-content">part12</span></h2><div class="para">content12,content12<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="13"></a><span class="headline-1-index">13</span><span class="headline-content">part13</span></h2><div class="para">content13,content13<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="14"></a><span class="headline-1-index">14</span><span class="headline-content">part14</span></h2><div class="para">content14,content14<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><h2 class="headline-1"><a class="anchor-1" name="15"></a><span class="headline-1-index">15</span><span class="headline-content">part15</span></h2><div class="para">content15,content15<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bottom</div></div><div class="slide" style=""><div id="sideToolbar" style="position: fixed; bottom: 0"><div id="sideCatalog" class="sideCatalogBg" style="visibility: visible;"><div id="sideCatalog-sidebar"><div class="sideCatalog-sidebar-top"></div><div class="sideCatalog-sidebar-bottom"></div></div><div id="sideCatalog-updown" style="visibility: visible;"><div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div><div id="sideCatalog-down" class="sideCatalog-down-enable" title="向下翻页"></div></div><div id="sideCatalog-catalog"><dl style="width:175px;zoom:1"><！--<dd id="sideToolbar-item-0-1" class="sideCatalog-item2 heightlight"><span class="sideCatalog-index1">1</span><a class="nslog:1026" onclick="return false;" title="part1" href="#1">part1</a><span class="sideCatalog-dot"></span></dd><dd id="sideToolbar-item-0-2" class="sideCatalog-item1"><span class="sideCatalog-index1">2</span><a class="nslog:1026" onclick="return false;" title="part2" href="#2">part2</a><span class="sideCatalog-dot"></span></dd><dd id="sideToolbar-item-0-2-1" class="sideCatalog-item2"><span class="sideCatalog-index1">2-1</span><a class="nslog:1026" onclick="return false;" title="part2" href="#2-1">part2-1</a><span class="sideCatalog-dot"></span></dd>--></dl></div></div><a id="sideCatalogBtn" class="" style="visibility: visible;" href="javascript:void（0）;"></a><a id="sideToolbar-up" style="visibility: visible;" title="返回顶部" href="javascript:void（0）"></a></div></div></div>

<script>var allEle = $（":header[class*="headline"]"）;var headLen = allEle.length;var ddArr = [];//根据页面内容生成slide导航；allEle.each（function（i）{var sideIndex,sideName,ddId,highlight="",ddClass,sideAnchor;sideName = $（this）.find（".headline-content"）.text（）;if（$（this）.hasClass（"headline-1"））{sideAnchor = sideIndex = $（this）.find（".anchor-1"）.eq（0）.attr（"name"）;ddClass = "sideCatalog-item1";}else{sideAnchor = $（this）.find（".anchor-2"）.eq（0）.attr（"name"）;sideIndex = sideAnchor.replace（"-","."）;ddClass = "sideCatalog-item2";}ddId = "sideToolbar-item-0-"+ sideAnchor;if（i==0）{highlight = "highlight";}var ddHtml = "<dd id=""+ ddId +"" class=""+ddClass + " " + highlight +"">"+"<span class="sideCatalog-index1">"+ sideIndex +"</span>"+"<a class="nslog:1026" onclick="return false;" title="part"+sideAnchor+"" href="#"+sideAnchor+"">"+ sideName +"</a>"+"<span class="sideCatalog-dot"></span>"+"</dd>";ddArr.push（ddHtml）;}）;$（"#sideCatalog-catalog dl"）.html（ddArr.join（""））;//设置导航的位置var slideTop = $（window）.height（） - $（".slide"）.height（）;$（".slide"）.css（"top",slideTop）;var slideInnerHeight = $（"#sideCatalog-catalog dl"）.height（）;var slideOutHeight = $（"#sideCatalog-catalog"）.height（）;var enableTop = slideInnerHeight - slideOutHeight;var step = 50;//点击向上的按钮$（"#sideCatalog-down"）.bind（"click", function （） {if （$（this）.hasClass（"sideCatalog-down-enable"）） {if （（enableTop - Math.abs（parseInt（$（"#sideCatalog-catalog dl"）.css（"top"）））） > step） {$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": "-=" + step}, "fast"）;$（"#sideCatalog-up"）.removeClass（"sideCatalog-up-disable"）.addClass（"sideCatalog-up-enable"）;} else {$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": -enableTop}, "fast"）;$（this）.removeClass（"sideCatalog-down-enable"）.addClass（"sideCatalog-down-disable"）;}} else {return false;}}）//点击向下的按钮$（"#sideCatalog-up"）.bind（"click", function （） {if （$（this）.hasClass（"sideCatalog-up-enable"）） {if （Math.abs（parseInt（$（"#sideCatalog-catalog dl"）.css（"top"））） > step） {$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": "+=" + step}, "fast"）;$（"#sideCatalog-down"）.removeClass（"sideCatalog-down-disable"）.addClass（"sideCatalog-down-enable"）;} else {$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": "0"}, "fast"）;$（this）.removeClass（"sideCatalog-up-enable"）.addClass（"sideCatalog-up-disable"）;}} else {return false;}}）//点击导航中的各个目录$（"#sideCatalog-catalog dl"）.delegate（"dd", "click", function （） {var index = $（"#sideCatalog-catalog dl dd"）.index（$（this））;scrollSlide（$（this）, index）;var ddIndex = $（this）.find（"a"）.stop（）.attr（"href"）.lastIndexOf（"#"）;var ddId = $（this）.find（"a"）.stop（）.attr（"href"）.substring（ddIndex+1）;var windowTop = $（"a[name="" + ddId + ""]"）.offset（）.top;$（"body,html"）.animate（{scrollTop: windowTop}, "fast"）;}）//滚动页面，即滚动条滚动$（window）.scroll（function （） {if（$（this）.scrollTop（）>$（this）.height（））{$（".slide"）.show（）;}else{$（".slide"）.hide（）;}for （var i=headLen-1; i>=0; i--） {if （$（this）.scrollTop（） >=allEle.eq（i）.offset（）.top - allEle.eq（i）.height（）） {var index = i;$（"#sideCatalog-catalog dl dd"）.eq（index）.addClass（"highlight"）.siblings（"dd"）.removeClass（"highlight"）;scrollSlide（$（"#sideCatalog-catalog dl dd"）.eq（index）, index）;return false;} else {$（"#sideCatalog-catalog dl dd"）.eq（0）.addClass（"highlight"）.siblings（"dd"）.removeClass（"highlight"）;}}}）//导航的滚动，以及向上，向下按钮的显示隐藏function scrollSlide（that, index）{if （index < 5） {$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": "0"}, "fast"）;$（"#sideCatalog-down"）.removeClass（"sideCatalog-down-disable"）.addClass（"sideCatalog-down-enable"）;$（"#sideCatalog-up"）.removeClass（"sideCatalog-up-enable"）.addClass（"sideCatalog-up-disable"）;} else if （index > 11） {$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": -enableTop}, "fast"）;$（"#sideCatalog-down"）.removeClass（"sideCatalog-down-enable"）.addClass（"sideCatalog-down-disable"）;$（"#sideCatalog-up"）.removeClass（"sideCatalog-up-disable"）.addClass（"sideCatalog-up-enable"）;} else {var dlTop = parseInt（$（"#sideCatalog-catalog dl"）.css（"top"）） + slideOutHeight / 2 - （that.offset（）.top - $（"#sideCatalog-catalog"）.offset（）.top）;$（"#sideCatalog-catalog dl"）.stop（）.animate（{"top": dlTop}, "fast"）;$（"#sideCatalog-down"）.removeClass（"sideCatalog-down-disable"）.addClass（"sideCatalog-down-enable"）;$（"#sideCatalog-up"）.removeClass（"sideCatalog-up-disable"）.addClass（"sideCatalog-up-enable"）;}}//置顶$（"#sideToolbar-up"）.bind（"click", function（）{$（"body,html"）.animate（{scrollTop: 0}, "fast"）;}）//slide内容的显示与隐藏$（"#sideCatalogBtn"）.bind（"click", function（）{if（$（this）.hasClass（"sideCatalogBtnDisable"））{$（this）.removeClass（"sideCatalogBtnDisable"）;$（"#sideCatalog"）.css（"visibility","visible"）;}else{$（this）.addClass（"sideCatalogBtnDisable"）;$（"#sideCatalog"）.css（"visibility","hidden"）;}}）</script>