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