滚动条事件顶部与左侧的实现

来源：互联网发布：哪里有冒险岛数据库编辑：程序博客网时间：2024/06/06 03:54
主要是描述了根据滚动条位置的改变其顶部与左侧部分的实现
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <style>        body{            margin: 0;            padding: 0;        }        .cont{            height: 5000px;        }        #top{            position: fixed;            top: 0;            width: 100%;            height: 50px;            left: 0px;            background-color: paleturquoise;            display: none;        }        #left{            position: fixed;            top:150px ;            background-color: pink;            left: 20px;            width: 50px;            height: 500px;            display: none;        }        #left ul{            list-style: none;        }           #left ul li{            border: 1px solid gray;                margin-left: -40px;                height: 30px;                line-height: 30px;                text-align: center;        }        .a{                border: 1px solid #FFFFFF;                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")            if(i >=1000){                top.style.display = "block";            }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>    <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