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>