js基础学习-滚动固定导航

<!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>
相关文章
