博客园装饰——（一）置顶菜单栏
一、功能描述
1.1 文字描述
- 当页面向下滚动到菜单栏上边沿触碰到浏览器窗口上边沿时，菜单栏会固定地显示在浏览器窗口上方(贴紧)，即达到了置顶菜单栏的效果。而当页面向上滚动到原来的位置时，菜单栏又会自动返回文档流，即回到初始的位置。
1.2 图片效果展示
1.2.1 例程(demo)效果展示
1.2.2 本人博客园效果展示
有现成的效果哟~你确定不试一哈？
二、 代码展示
2.1 html 部分
<body>
<div id="header">
<div class="else"></div>
<div id="navigator">菜单栏</div>
</div>
<br>
<br>
<br>
(div.text+br*10)*10
<!-- 上面这一句意思是以下代码块重复10遍，用上面的缩写是为了在写博客时控制篇幅
<div class="text">文本内容</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
-->
</body>
我们的菜单栏(id="navigator")的div盒子，是在(id="header")的盒子内部
2.2 CSS 部分
<style type="text/css">
body{
padding: 0px;
margin:0px;
}
#header{
100%;
/*background-color: lightblue;*/
}
#navigator, #navigator1{
100%;
background-color:gold;
text-align: center;
height:150px;
font:bold 75px/150px 'Microsoft Yahei';
/*opacity: 0.5;*/
}
/*用于当navigator脱离文档流时，navigator1来进行填充原来的空位*/
#navigator1{
/*由于刚开始，navigator(即菜单栏)没有脱离文档流，所以先不展示navigator1*/
display:none;
}
.else{
100%;
height:200px;
background-color: green;
}
.text{
text-align: center;
font:bold 25px/25px 'Microsoft Yahei';
}
</style>
由于"navigator1"博客园自带的html标签没有使用这个ID选择器（因为这是我们自己新增的一个选择器，为了当"navigator"脱离文档流时对原位置进行填充），所以我们需要下面的js代码来写入一个div标签，并且应用该ID选择器。具体原因，请看下面的重难点详解。
2.3 JS 部分
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 获取header这个标签元素
var $header = $('#header');
$header.html( $header.html() + '<div id="navigator1"></div>' );
var $navigator = $('#navigator');
var $navigator1 = $('#navigator1');
$(window).scroll(function(){
var $iNum = $(document).scrollTop();
//监控页面滚动距离，并显示在标签页上
// document.title = $iNum; // 200 触发事件
// 200 非固定值，根据自己的需要修改，最好就是滚动到菜单栏上边沿时触发
if ( $iNum >= 200){
/*
当页面滚动200px时，为navigator写入样式，使其固定定位到浏览器窗口上边沿
此时会发生脱离文档流现象
*/
$navigator.css({
'position':'fixed',
'top':0
})
// 相当于将navigator1的display的"none"改成"block"
$navigator1.show();
}
else{
/*设置为未定位，返回文档流*/
$navigator.css({
'position':'static'
})
// 设置回"none"，即隐藏
$navigator1.hide();
}
})
})
</script>
由于博客园原文档流当中没有"<div id="navigator1"></div>"这一句，所以需要通过js写入
三、重难点详解
3.1 页面内容跳变现象(脱离文档流)
3.1.1 动图演示
你会发现~♪菜单栏下面的“文档内容”这一行字会突然跳到菜单栏三个大字中间，这就是我所说的所谓的跳变现象，那这是为什么呢？
3.1.2 原因
如果你能看到这，答案相信已经很明了了，就是因为菜单栏应用了固定定位以后，发生了脱离文档流现象，导致外面的盒子header的高度变小了，从而使得下面的内容自动往上排版，从而出现页面内容跳变的现象。
3.1.3 解决方法
① 利用 js 获取 header 元素，通过 xxx.html( ) 方法写入"<div id="navigator1"></div>"
② 在CSS部分中，让"navigator1"应用相同的样式（保证占据与菜单栏相同的高度），并且先不展示（display:none;）
③ 当"navigator"脱离文档流以后，让"navigator1"展示出来，占据（填充）原来"navigator"的位置，从而达到克服页面跳变现象。
3.1.4 引入 "navigator1" 填充后动图演示
四、总结与后言
整体设计思路也并不复杂，主要注意脱离文档流以后导致的跳变现象。由于可能每个博客的样式与具体html文档内容不同，所以博主我在这里只提供了一个demo，大致的原理已经提及了。大家可以先通过demo自己研究一遍，再进行设计，毕竟自己设计的才是最符合自己心意的，并且能从中学到新知识。
博主还有其他几篇关于博客园装饰的文章，可供观看哟~