![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html>
<head>
<title>页面滚动条下移一定距离实现【固定的导航】</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style>
*{margin: 0;padding: 0;}
#main{width: 100%;height: 70px;background: #ccc;line-height: 70px;text-align: center;}
#box{width: 100%;height: 50px;background: #f00;line-height: 50px;text-align: center;
position: fixed;top: 0;
display: none;
}
input{width: 700px;height: 40px;border: 0;border-radius: 30px;}
.main{height: 1500px;margin: 0 auto;background: pink;}
</style>
</head>
<body>
<div id="main">
<input type="" name="">
</div>
<div id="box">
<input type="" name="">
</div>
<div class="main"></div>
<script>
window.onload=function(){
document.onscroll=function(){
if(document.documentElement.scrollTop>300){
document.getElementById('box').style.display="block";
}else{
document.getElementById('box').style.display="none";
}
}
}
</script>
</body>
</html>