這個可能有些兼容問題和小bug,新手寫的不完善 歡迎指出
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">*{margin: 0px;padding: 0px;list-style: none;}#header{width: 1000px;height: 650px;margin: 0 auto;position: relative;}.fl{width: 1000px;height: 600px;margin: 0 auto;position: relative;}#footer{width: 1000px;height: 600px;margin: 0 auto;position: relative;}#calc{height: 360px;width: 30px;position: fixed;display: none;left: 20px;top: 100px;}#calc ul li{width: 28px;height: 28px;border: dashed 1px lightgray;text-align: center;line-height: 30px;cursor: pointer;position: relative;}#calc ul li span{display: none;width: 28px;height: 28px;position: absolute;z-index: 1;background-color: red;overflow: hidden;top: 0px;left: 0px;font-size: 12px;}</style>
</head>
<body>
<div id="calc"><ul id="ul"><li>1<span>服飾</span></li><li>2<span>美妝</span></li><li>3<span>手機</span></li><li>4<span>家電</span></li><li>5<span>數碼</span></li><li>6<span>服務</span></li><li>7<span>圖書</span></li><li>8<span>母嬰</span></li><li>9<span>家具</span></li><li>10<span>運動</span></li><li>11<span>食品</span></li><li>top<span>頂部</span></li></ul>
</div>
<div id="header"><img src="header.png">
</div>
<div class="fl"><img src="服飾.png">
</div>
<div class="fl"><img src="美妝.png">
</div>
<div class="fl"><img src="手機.png">
</div>
<div class="fl"><img src="家電.png">
</div>
<div class="fl"><img src="數碼.png">
</div>
<div class="fl"><img src="服務.png">
</div>
<div class="fl"><img src="圖書.png">
</div>
<div class="fl"><img src="母嬰.png">
</div>
<div class="fl"><img src="居家.png">
</div>
<div class="fl"><img src="運動.png">
</div>
<div class="fl"><img src="食品.png">
</div>
<div id="footer"><img src="footer.png"></div>
</body>
</html>
<script type="text/javascript">
var header=document.getElementById('header');
var fl=document.getElementsByClassName('fl');
var footer=document.getElementById("footer");
var ul=document.getElementById("ul");
var li=ul.getElementsByTagName('li');
var span=ul.getElementsByTagName("span");
window.addEventListener("scroll",function(){var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;console.log(scrollTop)if(scrollTop>=650){ul.parentNode.style.display="block";}if(scrollTop<650){ul.parentNode.style.display="none";}for(i in fl){if(fl[i].offsetTop-scrollTop>-300){that=span[i];for(var j=0;j<span.length;j++){if (span[j]!=that) {span[j].style.display="none"}}span[i].style.display="block";return false}}
},0)for(var i=0;i<li.length;i++){(function(index){li[index].addEventListener("mouseover",function(){span[index].style.display="block";},false)})(i)
}
for(var i=0;i<li.length;i++){(function(index){li[index].addEventListener("click",function(){span[index].style.display="block";document.body.scrollTop=index*600+650;},false)})(i)
}
for(var i=0;i<li.length;i++){(function(index){li[index].addEventListener("mouseout",function(){span[index].style.display="none";},false)})(i)
}
</script>
)
