功能描述：当页面向下滚动到菜单栏上边沿触碰到浏览器窗口上边沿时，菜单栏会固定地显示在浏览器窗口上方(贴紧)，即达到了置顶菜单栏的效果。而当页面向上滚动到原来的位置时，菜单栏又会自动返回文档流，即回到初始的位置。
博客园装饰——（一）置顶菜单栏
一、功能描述
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 部分
body{
padding: 0px;
margin:0px;
}
#header{
width:100%;
/*background-color: lightblue;*/
}
#navigator, #navigator1{
width: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{
width:100%;
height:200px;
background-color: green;
}
.text{
text-align: center;
font:bold 25px/25px 'Microsoft Yahei';
}
由于 “navigator1”博客园自带的html标签没有使用这个ID选择器（因为这是我们自己新增的一个选择器，为了当 “navigator”脱离文档流时对原位置进行填充），所以我们需要下面的js代码来写入一个div标签，并且应用该ID选择器。具体原因，请看下面的 重难点详解。
2.3 JS 部分
$(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();
}
})
})
由于博客园原文档流当中没有””这一句，所以需要通过js写入
三、重难点详解
3.1 页面内容跳变现象(脱离文档流)
3.1.1 动图演示
你会发现~♪菜单栏下面的”文档内容”这一行字会 突然跳到 菜单栏三个大字 中间，这就是我所说的所谓的 跳变现象，那这是为什么呢？
3.1.2 原因
如果你能看到这，答案相信已经很明了了，就是因为菜单栏应用了 固定定位以后，发生了 脱离文档流现象，导致外面的盒子 header的高度变小了，从而使得下面的内容自动往上排版，从而出现 页面内容跳变的现象。
3.1.3 解决方法
① 利用 js 获取 header 元素，通过 xxx.html( ) 方法写入 ” “
② 在CSS部分中，让”navigator1″应用 相同的样式（保证占据与菜单栏相同的高度），并且先不展示 （display:none;）
③ 当”navigator”脱离文档流以后，让”navigator1″展示出来， 占据（填充）原来”navigator”的位置，从而达到克服页面跳变现象。
四、总结与后言
整体设计思路也并不复杂，主要注意脱离文档流以后导致的跳变现象。由于可能每个博客的样式与具体html文档内容不同，所以博主我在这里只提供了一个demo，大致的原理已经提及了。大家可以先通过demo自己研究一遍，再进行设计， 毕竟自己设计的才是最符合自己心意的，并且能从中学到新知识。
博主还有其他几篇关于博客园装饰的文章，可供观看哟~
博客园装饰——（二）滚动到页面顶部或底部
博客园装饰——（三）博客园导航目录Original: https://www.cnblogs.com/fry-hell/p/13338205.html
Author: 油炸地狱
Title: 博客园装饰——（一）置顶菜单栏
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/612520/
转载文章受原作者版权保护。转载请注明原作者出处！