javascript实现页面悬浮导航

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	a{
		text-decoration: none;
	}
	#suspendNavigation{
		position:absolute;
		top: 0px;
		left:0px;
		background-color: #ccc;
		width: 100%;
		z-index: 1000;
	}
	#suspendNavigation div{
		float: left;
		position: relative;
		border: #cc2123 1px solid;
		width:19%;
		height:30px;
		text-align: center;
		line-height: 30px;
	}
	body{
		height: 2000px;
	}
</style>
</head>
<body>
	<div id="suspendNavigation">
		<h2>页面悬浮导航</h2>
		<div>
			<a href="" target="_blank">导航1</a>
		</div>
		<div>
			<a href="" target="_blank">导航2</a>
		</div>
		<div>
			<a href="" target="_blank">导航3</a>
		</div>
		<div>
			<a href="" target="_blank">导航4</a>
		</div>
		<div>
			<a href="" target="_blank">导航5</a>
		</div>
	</div>
</body>
<script type="text/javascript">
	window.onload=function(){
		//获取待定位的元素
		var suspendNavigation=document.getElementById("suspendNavigation");
		window.onscroll=function(){
			//alert("test1");
			//alert(suspendNavigation.style.top);
			//alert(document.body.scrollTop);
			//alert(document.documentElement.scrollTop);
			//suspendNavigation.style.top=document.body.scrollTop+"px";
			suspendNavigation.style.top=(document.documentElement.scrollTop||document.body.scrollTop)+"px";
			
		}
	}
</script>
</html>

  

posted @ 2016-05-12 19:25  hephec  阅读(1359)  评论(0编辑  收藏  举报