JavaScript基础—滚动条事件

来源：互联网发布：时辰天干推算法编辑：程序博客网时间：2024/05/22 14:28
这里写图片描述
<!DOCTYPE html><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