【教程】网页头部（导航部分）不随页面滚动

图片实例

html代码

<div id="top">
	<div id="top1">
        <div id="logo"></div>
        <div id="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="content">
	<script>
	for(var i=1;i<=100;i++){
		document.write(i+"<br>");	
	}
	</script>
</div>

css代码

* {
	padding: 0;
	margin: 0;	
}
ul,li {
	list-style-type: none;	
}
body {
	text-align: center;
}
#top {
	height: 100px;
	width: 100%;
	border: 1px solid #000;
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
}
#top1 {
	width: 1024px;
	height: 100px;
	margin: 0 auto;	
	border: 1px solid #000;
	background: #CCC;
}
#logo {
	float: left;
	width: 300px;
	height: 100px;
	background: #F00;
}
#nav {
	float: left;
	width: 600px;
	height: 100px;
	border: 1px solid #000;	
}
#nav li {
	float: left;
	width: 80px;
	height: 100px;
	border: 1px solid #000;	
	line-height: 170px;
}
#content {
	width: 1024px;
	height: 3000px;
	border: 1px solid #000;
	margin: 0 auto;
	margin-top: 100px;
}

重点内容在于控制#top的position为fixed即可。