javaScript实现滚动条事件

来源：互联网发布：淘宝网打底连衣裙编辑：程序博客网时间：2024/05/16 09:38
这里写图片描述
<html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        <title></title>        <style>            body {                margin: 0;                padding: 0;            }            .cont {                height: 7000px;            }            #top {                position: fixed;                width: 100%;                height: 55px;                top: 0px;                left: 0px;                background-color: rosybrown;                display: none;            }            #left {                position: fixed;                width: 50px;                height: 400px;                top: 150px;                left: 50px;                background-color: cadetblue;                display: none;            }            #left ul {                list-style: none;                padding-left: 0px;            }            #left ul li {                border: 1px solid white;                /*color: azure;*/                height: 30px;                line-height: 30px;                text-align: center;                margin: 15px auto;                /*display: none;*/            }            .a {                background-color: burlywood;                color: #FFFFFF;            }        </style>        <script>            //滚动事件            function myScroll() {                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");                var f6 = document.getElementById("f6");                //控制顶部                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 = "";                    f6.className = "";                } else if(i > 2500 && i <= 3000) {                    f1.className = "";                    f2.className = "a";                    f3.className = "";                    f4.className = "";                    f5.className = "";                    f6.className = "";                } else if(i > 3000 && i <= 3500) {                    f1.className = "";                    f2.className = "";                    f3.className = "a";                    f4.className = "";                    f5.className = "";                    f6.className = "";                } else if(i > 3500 && i <= 4000) {                    f1.className = "";                    f2.className = "";                    f3.className = "";                    f4.className = "a";                    f5.className = "";                    f6.className = "";                } else if(i > 4000 && i <= 4500) {                    f1.className = "";                    f2.className = "";                    f3.className = "";                    f4.className = "";                    f5.className = "a";                    f6.className = "";                } else if(i > 4500 && i <= 5000) {                    f1.className = "";                    f2.className = "";                    f3.className = "";                    f4.className = "";                    f5.className = "";                    f6.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>                <li id="f6">6F</li>            </ul>        </div>        <div id="top"></div>        <div class="cont"></div>    </body></html>
阅读全文
0 0