顶端由javascript代码完成：

最新推荐文章于 2024-11-08 10:30:00 发布

原创最新推荐文章于 2024-11-08 10:30:00 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

Html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种实现顶部悬浮菜单栏的方法，一种使用JavaScript平滑滚动效果，另一种仅依靠CSS实现跨浏览器兼容的固定顶部布局。

顶端由Javascript生成：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
<title>自动固定顶部的悬浮菜单栏代码</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

ul,li {
	list-style: none;
}

#content {
	width: 600px;
	margin: 0 auto;
	border: 1px solid #f00;
}

ul li.item {
	width: 400px;
	text-align: center;
	margin: 20px 100px;
	background: #7CCD7C;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	height: 100px;
	line-height: 100px;
}
</style>
</head>
<body>
	<ul id="content">
		<li class="item">第一块内容</li>
		<li class="item">第二块内容</li>
		<li class="item">第三块内容</li>
		<li class="item">第四块内容</li>
		<li class="item">第五块内容</li>
		<li class="item">第六块内容</li>
		<li class="item">第七块内容</li>
		<li class="item">第八块内容</li>
		<li class="item">第九块内容</li>
		<li class="item">第十块内容</li>
	</ul>
	<script language="javascript">
		document.write("<div id=\"float_banner\" style=\"position: absolute;top: 0;left: 0;width: 100%;	margin-left: 0;	height: 30px;line-height: 30px;text-align: center;background: #E3E3E3;color: #CD0000;font-size: 14px;font-weight: bold;z-index: 2;\">广告位招租啦~</div>"); 
		var speed = 80;
		var scrollTop = null;
		var hold = 0;
		var float_banner;
		var pos = null;
		var timer = null;
		var moveHeight = null;
		float_banner = document.getElementById("float_banner");
		window.onscroll = scroll_ad;
		function scroll_ad() {
			scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
			pos = scrollTop - float_banner.offsetTop;
			pos = pos / 10 ;
			moveHeight = pos > 0 ? Math.ceil(pos) : Math.floor(pos);
			if (moveHeight != 0) {
				float_banner.style.top = float_banner.offsetTop + moveHeight + "px";
				setTimeout(scroll_ad, speed);
			}
		}
	</script>
</body>
</html>

顶端由CSS生成：

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自动固定顶部的悬浮菜单栏代码</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

ul,li {
	list-style: none;
}

#content {
	width: 600px;
	margin: 0 auto;
	border: 1px solid #f00;
}

ul li.item {
	width: 400px;
	text-align: center;
	margin: 20px 100px;
	background: #48D1CC;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	height: 100px;
	line-height: 100px;
}

#float_banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin-left: 0;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #E3E3E3;
	color: #00f;
	font-size: 14px;
	font-weight: bold;
	z-index: 2;
}
</style>
</head>
<body>
	<div id="float_banner">这里是顶部的横幅，随着页面转动而浮动</div>
	<ul id="content">
		<li class="item">第一块内容</li>
		<li class="item">第二块内容</li>
		<li class="item">第三块内容</li>
		<li class="item">第四块内容</li>
		<li class="item">第五块内容</li>
		<li class="item">第六块内容</li>
		<li class="item">第七块内容</li>
		<li class="item">第八块内容</li>
		<li class="item">第九块内容</li>
		<li class="item">第十块内容</li>
	</ul>
	<script language="javascript">
		var speed = 80;
		var scrollTop = null;
		var hold = 0;
		var float_banner;
		var pos = null;
		var timer = null;
		var moveHeight = null;
		float_banner = document.getElementById("float_banner");
		window.onscroll = scroll_ad;
		function scroll_ad() {
			scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
			pos = scrollTop - float_banner.offsetTop;
			pos = pos / 10 ;
			moveHeight = pos > 0 ? Math.ceil(pos) : Math.floor(pos);
			if (moveHeight != 0) {
				float_banner.style.top = float_banner.offsetTop + moveHeight + "px";
				setTimeout(scroll_ad, speed);
			}
		}
	</script>
</body>
</html>

CSS特效 - 不用JS也能让工具栏悬浮于网页顶部（兼容所有浏览器）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
<title>CSS特效 - 不用JS也能让工具栏悬浮于网页顶部（兼容所有浏览器）</title>
<style type="text/css">
.float_banner {
	position:fixed !important;
	top:0px;
	left: 50%;
	margin-left:-468px;
	position:absolute;
	top:expression(offsetParent.scrollTop+0);
	text-align: center;
	border: 1px solid #dddddd;
	border-top: none;
	background: #ffffff;
	width:934px;
	height:20px
}
</style>
</head>
<body>
	<DIV class="float_banner">
	不用JS也能让工具栏悬浮于网页顶部（兼容所有浏览器）
	</DIV>
	<DIV style="text-align: center;">
	<BR>
	<BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	文章内容<BR><BR>
	</DIV>
</body>