简单的滚动条事件

最新推荐文章于 2023-11-26 10:43:02 发布

明天早晨喝牛奶

最新推荐文章于 2023-11-26 10:43:02 发布

阅读量270

点赞数

分类专栏： js事件集中营效果片段集合文章标签： javascript

本文链接：https://blog.csdn.net/qq_40289292/article/details/78098319

版权

效果片段集合同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

js事件集中营

11 篇文章 0 订阅

订阅专栏

通过js中的onscroll事件，实现在浏览器中滚动页面时，在浏览器的不同部位显示两个不同div的效果。

注意事项：
1.关于内边距的使用问题举例，ul和li的原始距离。
padding是用在ul里的。

2.text-indent:20px;这是文本缩进，也可用于焦点缩进。
3.其他注意事项，详情请见代码中注释。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
            .a{
                height: 6000px;
            }
            #top{
                /*border: 1px solid #000000;*/
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 50px;
                background-color: plum;
                display: none;
            }
            #left{
                /*border: 1px solid #000000;*/
                position: fixed;
                top: 150px;
                left: 20px;
                width: 50px;
                height: 280px;
                background-color: aqua;
                display: none;

            }
            #left ul{
                /*border: 1px solid #000000;*/
                list-style: none;
                padding-left: 0px;
                text-align: center;
                line-height: 30px;
            }
        /*关于ul中,与li距离调整的关系,需要操作padding内边距.*/
            #left li{
                /*border: 1px solid #000000;*/
                height: 30px;
                margin: 20px auto;
            }
            .a{
                color: red;
            }
        </style>
        <script>

            function myScroll(){
                var b=document.body.scrollTop;//body标签具有唯一性，故不需要getid.
                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(b>=1000){
                    top.style.display="block";//top代表标签top调用，top标签的属性style.
                top.innerHTML=b;

                }else{
                    top.style.display="none";

                }

                if(b>=2000&&b<=5000){
                    left.style.display="block";

                }else{
                    left.style.display="none";

                }

                if(b>=2000&&b<=2500){
                    f1.className="a"
                    f2.className=""
                    f3.className=""
                    f4.className=""
                    f5.className=""

                }else if(b>=2500&&b<=3000){
                    f1.className=""
                    f2.className="a"
                    f3.className=""
                    f4.className=""
                    f5.className=""
                }else if(b>=3000&&b<=3500){
                    f1.className=""
                    f2.className=""
                    f3.className="a"
                    f4.className=""
                    f5.className=""
                }else if(b>=3500&&b<=4000){
                    f1.className=""
                    f2.className=""
                    f3.className=""
                    f4.className="a"
                    f5.className=""
                }else if(b>=4000&&b<=4500){
                    f1.className=""
                    f2.className=""
                    f3.className=""
                    f4.className=""
                    f5.className="a"
                }else{
                    f1.className=""
                    f2.className=""
                    f3.className=""
                    f4.className=""
                    f5.className=""
                }

            }

        </script>
    </head>



    <body onscroll="myScroll()">
        <div class="a"></div>
        <div id="top"></div>
        <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>
    </body>
</html>