<!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>