前端学习第七弹：固定位置的导航
程序员文章站
2022-04-22 15:02:21
...
导航条固定在窗口顶端，拖动滚动条其位置不会变化。做到最后对于css中的“position”属性很是不解，尤其是设置margin和padding后，各种眩晕，待会展示一下，具体的探索见下一篇对于该属性的随笔小记。
<html>
<head>
<meta charset=utf-8 />
<style type=text/css>
body{
height:2000px;
font-family:serif;
background-color:#fff8dc;
}
.header{
position:fixed;
top:0px;
left:0px;
width:100%;
height:80px;
background-color:#ccccff;
color:#fff;
text-align:center;
}
.header-in{
font-family:sans-serif;
font-size:20px;
padding-top:15px;
}
.scoll{
margin-top:100px;
padding-top:250px;
text-align:center;
background-color:#fff;
}
</style>
</head>
<body>
<div class="header">
<h1 class="header-in">这里是一个固定的导航界面</h1>
</div>
<div class="scoll">
<p>该内容会随着滚动条上下移动</p>
</div>
</body>
</html>效果图如下：
是不是有点懵，原谅我的色感~~~划分不同的色块主要是为了区分不同的<div>，顶端的导航条高度为80px，白色区域的滚动区上外边距为100px，所以二者之间会有缝隙，看看拖动滚动条的效果：
注意到滚动区往上前进了一段距离，而导航栏却没有动，这个时候将类header中的top和left删掉效果如下：
可以看出导航条和滚动区域的上边界重合，且都距离上边框100px，这里涉及的位置属性的内容见下篇博客~~
推荐阅读