关于滚动条事件

来源：互联网发布：遇见营销软件编辑：程序博客网时间：2024/06/06 01:26

博主：亳州学院
直接上代码

“““ 这里写图片描述
这里写代码片

body{
margin: 0;
padding: 0;
}
.cont{
height: 5000px;
}
#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;
}

    <script>

// var a = 0;

        //滚动事件        function myScroll(){

// a++;

            var i = document.body.scrollTop;            var top = document.getElementById("top");            var left = document.getElementById("left");            //控制顶部            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";            }        }    </script></head><body onscroll="myScroll()">    <div id="left"></div>    <div id="top"></div>    <div class="cont"></div></body>

阅读全文

1 0