<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在文档页面局部出现导航随内容滚动高亮显示效果</title> <style> *{ list-style:none; margin:0; padding:0; text-decoration:none; font-family:'Microsoft YaHei'; } html{ height: 100%; overflow: hidden; } .x_mg_xlcd #text { width: 70%; padding: 0!important; height: 700px; overflow: auto; } .x_mg_xlcd li{ width:100px; height:50px; line-height:50px; border-right:2px solid #eee; text-align:center; cursor:pointer; } .x_mg_xlcd .gd_nav .cur{ font-size: 22px; } .x_mg_xlcd .gd_nav{ position:fixed; top:0; right:0; } .x_mg_xlcd #text{width: 70%;padding:0!important;} .x_mg_xlcd #text .box{ width: 100%;height: 500px;background: pink;border-bottom: 3px solid blue} </style> </head> <body> <div class="x_mg_xlcd"> <div class="gd_nav" id="nav-container"> <ul id="nav-box"> <li class="cur"><a href="#x_a">A</a></li> <li><a href="#x_b">B</a></li> <li><a href="#x_c">C</a></li> <li><a href="#x_d">D</a></li> <li><a href="#x_e">E</a></li> </ul> </div> <div id="text"> <div id="x_a" class="box">A</div> <div id="x_b" class="box">B</div> <div id="x_c" class="box" >C</div> <div id="x_d" class="box">D</div> <div id="x_e" class="box">E</div> </div> </div> <script> var navContainer = document.getElementById("nav-container"); var navBox = document.getElementById("nav-box"); var text = document.getElementById("text"); var navBoxChild = navBox.children; var textChild = text.children; var num = navContainer.offsetTop; var a = navContainer.offsetHeight; document.getElementById("text").onmousewheel = function(event) { var scrollTop = document.getElementById("text").scrollTop; if(scrollTop >= num){ navContainer.className = "gd_nav"; text.style.paddingTop = a +"px"; }else{ navContainer.className = "gd_nav"; text.style.paddingTop = ""; } //当导航与相应文档接触的时候自动切换 //method1 for(var i=0;i<navBoxChild.length;i++){ if( scrollTop + a >= textChild[i].offsetTop){ for(var j=0;j<navBoxChild.length;j++){ navBoxChild[j].className = ""; } navBoxChild[i].className = "cur"; } } }; for(var i=0;i<navBoxChild.length;i++){ var interval; navBoxChild[i].index = i; navBoxChild[i].onclick = function(){ var self = this; clearInterval(interval); interval = setInterval(function(){ if(document.getElementById("text").scrollTop + a<=textChild[self.index].offsetTop){ document.getElementById("text").scrollTop += 40; if(document.getElementById("text").scrollTop + a>=textChild[self.index].offsetTop){ document.getElementById("text").scrollTop = textChild[self.index].offsetTop-a; clearInterval(interval); } }else{ document.getElementById("text").scrollTop /= 1.1; if(document.getElementById("text").scrollTop + a<=textChild[self.index].offsetTop){ document.getElementById("text").scrollTop = textChild[self.index].offsetTop-a; clearInterval(interval); } } },40); }; } </script> </body> </html>