<!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=gb2312" /> <title>联动菜单</title> <style type="text/css"> *{ margin:0; padding:0;} li{ list-style:none;} .nav-wrapper{ width:100%; position:fixed; top:0;} .nav{ width:960px; height:30px; line-height:30px; margin:0 auto;} .nav li{ float:left; width:100px; text-align:center; background:#F2F2F2; margin-right:5px;} .nav li.selected{ color:#fff; background:red;} .box{ width:960px; height:200px; background:#CCC; margin:10px auto 0;} </style> <script type="text/javascript"> window.onload=function(){ var lis=document.getElementById('nav').getElementsByTagName('li'); var divs=document.getElementById('boxWrapper').getElementsByTagName('div'); var i=0; var j=0; var divTop=[]; for(i=0; i<divs.length; i++){ divTop.push(divs[i].offsetTop); } //console.log(divTop); window.onscroll=function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //document.title=scrollTop; for(i=0; i<divTop.length; i++){ //console.log(divTop[i]-scrollTop); if(divTop[i]-scrollTop<190){ for(j=0; j<lis.length;j++){ lis[j].className=''; } lis[i].className='selected'; } } }; }; </script> </head> <body style="height:3000px;"> <div class="nav-wrapper"> <div class="nav" id="nav"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> <li>菜单五</li> </ul> </div> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="boxWrapper"> <div class="box"> <h1>菜单一</h1> </div> <div class="box"> <h1>菜单二</h1> </div> <div class="box"> <h1>菜单三</h1> </div> <div class="box"> <h1>菜单四</h1> </div> <div class="box"> <h1>菜单五</h1> </div> </div> </body> </html>