滚动条事件

最新推荐文章于 2024-09-11 11:07:15 发布

lkktyz

最新推荐文章于 2024-09-11 11:07:15 发布

阅读量235

点赞数

文章标签：鼠标滚动条

本文链接：https://blog.csdn.net/lkktyz/article/details/78112799

版权

滚动条事件

滚动计数+楼层显示

<!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>