演示地址: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
