前端学习第七弹：固定位置的导航

来源：互联网发布：javascript知识点总结编辑：程序博客网时间：2024/05/22 09:46

导航条固定在窗口顶端，拖动滚动条其位置不会变化。做到最后对于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，这里涉及的位置属性的内容见下篇博客~~

阅读全文

0 0