简单的滚动条事件

来源：互联网发布：优化人才管理是什么编辑：程序博客网时间：2024/05/16 17:41

通过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>

阅读全文

0 0