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

最新推荐文章于 2024-03-07 13:28:46 发布

没有伞的人

最新推荐文章于 2024-03-07 13:28:46 发布

阅读量302

点赞数

分类专栏： web 文章标签： css web javascript javaweb

本文链接：https://blog.csdn.net/qq_38122859/article/details/78095682

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

主要是描述了根据滚动条位置的改变其顶部与左侧部分的实现

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