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

最新推荐文章于 2024-03-30 09:58:45 发布

beyond_LH

最新推荐文章于 2024-03-30 09:58:45 发布

阅读量2.7k

点赞数 1

分类专栏：前端的快乐生活文章标签：前端导航 position fixed 布局

本文链接：https://blog.csdn.net/beyond9305/article/details/78427228

版权

前端的快乐生活专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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

beyond_LH

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习第七弹：固定位置的导航

导航条固定在窗口顶端，拖动滚动条其位置不会变化。做到最后对于css中的“position”属性很是不解，尤其是设置margin和padding后，各种眩晕，待会展示一下，具体的探索见下一篇对于该属性的随笔小记。 body{ height:2000px; font-family:serif; background-color:#fff8dc;
复制链接

扫一扫