web——滚动事件（一）

最新推荐文章于 2022-08-02 10:46:59 发布

Cl_Daisy

最新推荐文章于 2022-08-02 10:46:59 发布

阅读量557

点赞数

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

本文链接：https://blog.csdn.net/Cl_Daisy/article/details/78096527

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先固定这个滚动的范围是多少（我这里固定的是6000px，你可以自己写个值）

1、等到滚动到达1500的高度时，上面的那个绿色的框会显示出来，小于1500时则会隐藏
(当然你也可以自己确定值，随个人的喜好而定)

2、到滚动到达1700的高度时，左侧会出现红色的垂直框，小于1700则会隐藏
（这些值也是可以更改的）

（1）滚动到1700时，则默认是在1F 
（2）当滚动到2200的高度时，则会显示2F
（3）当滚动到3000的高度时，则会显示3F

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .cont{
                height:6000px;
            }
            #top{
                position: fixed;
                width: 100%;
                height: 50px;
                top: 0px;
                left: 0px;
                background-color: aquamarine;
                display: none;
            }
            #left{
                position: fixed;
                top: 150px;
                left: 20px;
                height: 200px;
                width: 50px;
                background-color: #FF0000;
                display: none;
            }
            #left ul{
                list-style: none;
                padding-left: 0px;
            }
            #left ul li{
                /*border: 1px solid gray;*/
                margin: 15px auto;
                line-height: 30px;
                text-align: center;
            }
            .a{
                /*border: 1px solid #7FFFD4;*/
                color: #7FFFD4;
            }
        </style>
        <script>

            var a=0;

            //滚动事件
            function myScroll(){
                a++;

                var i= document.body.scrollTop;
                var top=document.getElementById("top");
                var left=document.getElementById("left");

                //控制顶部
                if(i>=1500){
                    top.style.display="block";
                    top.innerHTML=i;
                }else{
                    top.style.display="none";
                }

                //控制左侧
                if(i>=1700){
                    left.style.display="block";
                }else{
                    left.style.display="none";
                }

                //显示楼层
                if(i>=1700 && i<=2200){
                    f1.className="a";
                    f2.className="";
                    f3.className="";
                }else if(i>2200 && i<=3000){
                    f1.className="";
                    f2.className="a";
                    f3.className="";
                }else if(i>3000 && i<=3900){
                    f1.className="";
                    f2.className="";
                    f3.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>
            </ul>
        </div>

        <div id="top"></div>
        <div class="cont"></div>
    </body>
</html>