滚动条事件

来源：互联网发布：深圳启讯网络骗局编辑：程序博客网时间：2024/06/05 09:31
<html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;padding: 0;}.cont{height: 10000px;}#top{position: fixed;width: 100%;height: 50px;top: 0px;left: 0px;background-color: pink;display: none;}#left{position: fixed;top: 150px;left: 20px;height: 500px;width: 50px;background-color: green;display: none;}#left ul{list-style: none;padding-left: 0px;}#left ul li{border: 1px solid gray;margin: 15px auto;height: 30px;line-height: 30px;text-align: center;}.a{border: 1px solid #FFFFFF;color: #FFFFFF;}</style><script>//var a = 0;//滚动事件function myScroll(){//a++;var i = document.body.scrollTop;var top = document.getElementById("top");var left = document.getElementById("left");var f1 = document.getElementById("f1");var f2 = document.getElementById("f2");var f3 = document.getElementById("f3");var f4 = document.getElementById("f4");var f5 = document.getElementById("f5");//控制顶部if(i >= 1000){top.style.display = "block";top.innerHTML = i;}else{top.style.display = "none";}//控制左侧if(i >= 2000){left.style.display = "block";}else{left.style.display = "none";}//显示楼层if(i >= 2000 && i<=2500){f1.className = "a";f2.className = "";f3.className = "";f4.className = "";f5.className = "";}else if(i>2500 && i<=3000){f1.className = "";f2.className = "a";f3.className = "";f4.className = "";f5.className = "";}else if(i>3000 && i<=3500){f1.className = "";f2.className = "";f3.className = "a";f4.className = "";f5.className = "";}else if(i>3500 && i<=4000){f1.className = "";f2.className = "";f3.className = "";f4.className = "a";f5.className = "";}else if(i>4000 && i<=4500){f1.className = "";f2.className = "";f3.className = "";f4.className = "";f5.className = "a";}}</script></head><body onscroll="myScroll()"><div id="left"><ul><li id="f1">1F</li><li id="f2">2F</li><li id="f3">3F</li><li id="f4">4F</li><li id="f5">5F</li></ul></div><div id="top"></div><div class="cont"></div></body></html>
阅读全文
0 0