javascript实现页面悬浮导航

最新推荐文章于 2022-08-11 13:07:27 发布

weixin_30929011

最新推荐文章于 2022-08-11 13:07:27 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hephec/p/5487017.html

版权

<!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.οnlοad=function(){
		//获取待定位的元素
		var suspendNavigation=document.getElementById("suspendNavigation");
		window.οnscrοll=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>

转载于:https://www.cnblogs.com/hephec/p/5487017.html