收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html>
<head>
<title>页面滚动条下移一定距离实现固定导航</title>
<style type="text/css">
*{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 type="text/javascript">
window.onload=function(){
document.onscroll=function(){//onscroll 事件在元素滚动条在滚动时触发
if(document.documentElement.scrollTop>300){//scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
document.getElementById('box').style.display="block"
}else{
document.getElementById('box').style.display="none"
}
}
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
