博客园装饰——（一）置顶菜单栏

博客园装饰——（一）置顶菜单栏

一、功能描述

1.1 文字描述

• 当页面向下滚动到菜单栏上边沿触碰到浏览器窗口上边沿时，菜单栏会固定地显示在浏览器窗口上方(贴紧)，即达到了置顶菜单栏的效果。而当页面向上滚动到原来的位置时，菜单栏又会自动返回文档流，即回到初始的位置。

1.2 图片效果展示

1.2.1 例程(demo)效果展示

1.2.2 本人博客园效果展示

有现成的效果哟~你确定不试一哈？

二、 代码展示

2.1 html 部分

		

			

			
菜单栏
		
		

		

		

    	(div.text+br*10)*10
		

我们的菜单栏(id="navigator")的div盒子，是在(id="header")的盒子内部

2.2 CSS 部分

由于"navigator1"博客园自带的html标签没有使用这个ID选择器（因为这是我们自己新增的一个选择器，为了当"navigator"脱离文档流时对原位置进行填充），所以我们需要下面的js代码来写入一个div标签，并且应用该ID选择器。具体原因，请看下面的重难点详解。

2.3 JS 部分

由于博客园原文档流当中没有"

"这一句，所以需要通过js写入

三、重难点详解

3.1 页面内容跳变现象(脱离文档流)

3.1.1 动图演示

你会发现~♪菜单栏下面的“文档内容”这一行字会突然跳到菜单栏三个大字中间，这就是我所说的所谓的跳变现象，那这是为什么呢？

3.1.2 原因

如果你能看到这，答案相信已经很明了了，就是因为菜单栏应用了固定定位以后，发生了脱离文档流现象，导致外面的盒子header的高度变小了，从而使得下面的内容自动往上排版，从而出现页面内容跳变的现象。

3.1.3 解决方法

① 利用 js 获取 header 元素，通过 xxx.html( ) 方法写入"

"

② 在CSS部分中，让"navigator1"应用相同的样式（保证占据与菜单栏相同的高度），并且先不展示（display:none;）

③ 当"navigator"脱离文档流以后，让"navigator1"展示出来，占据（填充）原来"navigator"的位置，从而达到克服页面跳变现象。

3.1.4 引入 "navigator1" 填充后动图演示

四、总结与后言

整体设计思路也并不复杂，主要注意脱离文档流以后导致的跳变现象。由于可能每个博客的样式与具体html文档内容不同，所以博主我在这里只提供了一个demo，大致的原理已经提及了。大家可以先通过demo自己研究一遍，再进行设计，毕竟自己设计的才是最符合自己心意的，并且能从中学到新知识。

博主还有其他几篇关于博客园装饰的文章，可供观看哟~

博客园装饰——（二）滚动到页面顶部或底部

博客园装饰——（三）博客园导航目录