实例
<!DOCTYPE html>
<html>
<head>
<title>页面滚动条下移一定距离实现固定导航显示</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.main{
width: 100%;
height:1500px;
background: #ccc;
}
.menu{
width: 100%;
position:fixed;top:0;
z-index:1000;
text-align:center;
background: red;
height: 80px;
line-height: 80px;
display: none;
}
.menu input{
width:280px;
height:30px;
border-radius: 50px;
border:none;
outline:none;
padding-left: 20px;
}
</style>
</head>
<body><!-- 也可以把事件写在body中即body onscroll="dismenue()"，也可以按照下方的方法直接在JS中完成。 -->
<div class="main">
<div class="menu">
<input type="" name="">
</div>
</div>
<script type="text/javascript">
document.onscroll=function dismenue(){//document.onscroll事件的含义：当文档滚动条在滚动时触发后面的函数立即执行，此处document也可以是元素，为元素事件。
var omenu=document.getElementsByClassName('menu')[0];
if(document.documentElement.scrollTop>300){
omenu.style.display="block";
}else{
omenu.style.display="none";
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例