滑动页面菜单相应高亮

演示地址:http://www.atynote.com/webstudy/scrolltop.html
首先使用scrolltop获取滑动窗口的高度
然后使用if判断高度的范围，再使用样式改变菜单的背景色
js代码

 <script type="text/javascript">   
 function change(){        
var mytop=document.body.scrollTop;   //获取滑动窗口的高度    
 if(mytop<700){            
document.getElementById("li-1").style.background="chartreuse";            document.getElementById("li-2").style.background="gray";            document.getElementById("li-3").style.background="gray";            document.getElementById("li-4").style.background="gray";     
   }else if(mytop<1400&&mytop>700){   
document.getElementById("li-1").style.background="gray";            document.getElementById("li-2").style.background="chartreuse";            document.getElementById("li-3").style.background="gray";            document.getElementById("li-4").style.background="gray";       
 }else if(mytop>1400&&mytop<2100){            
document.getElementById("li-1").style.background="gray";            document.getElementById("li-2").style.background="gray";            document.getElementById("li-3").style.background="chartreuse";            document.getElementById("li-4").style.background="gray";        
}else if(mytop>2100){           
document.getElementById("li-1").style.background="gray";            document.getElementById("li-2").style.background="gray";            document.getElementById("li-3").style.background="gray";            document.getElementById("li-4").style.background="chartreuse";        
}    
}
</script>

Paste_Image.png