菜单栏自动顶置
在网页中，人们通常喜欢把菜单栏顶置，即使用fixed布局。这样设置，即使页面网上滚动了，也不影响快速切换页面的操作。那么，本文将要说一说下面几种方法，实现菜单栏自动顶置功能。
- 滚动焦点是document，menu上方没有其他div
- 滚动焦点是document，menu上方存在其他div
- 滚动焦点是其他dom，menu上方存在其他div
首先，javaScript是共用同一份代码的，区别在于html代码设置的样式不一样。
js文件（index.js）
var menu = document.getElementById('menu');
var menuWrap = document.getElementById('menuWrap');
var paddingWrap = document.getElementById('paddingWrap');
var scrollDom = document.getElementById('scrollDom') || null;
var scrollDomHeight = document.getElementById('scrollDomHeight') || null;
var fixedStyle = {
position: 'fixed',
top: '0',
left: '0',
right: '0',
'z-index': '6'
};
if( scrollDom ){
// 判断menu存在于absolute布局的div中
document.removeEventListener("scroll", this.updatePosition, false);
scrollDom.addEventListener("scroll", this.updatePosition, false);
}else if(menuWrap.offsetTop > 0){
// 判断menu上方存在其他div
document.addEventListener("scroll", updatePosition, false);
}else{
// 普通状态下的menu
var style = styleChange(fixedStyle);
menu.setAttribute('style', style);
paddingWrap.style.paddingBottom = '50px';
}
// 对象样式格式化为css样式
function styleChange(obj){
var style = '';
for( var i in obj){
style = style + i+':'+obj[i]+';';
}
return style;
}
// 存在滚动事件，重新定义位置
function updatePosition(){
var scrollTop = scrollDom ? scrollDom.scrollTop : (document.body.scrollTop || document.documentElement.scrollTop);
var offsetTop = scrollDomHeight ? scrollDomHeight.clientHeight : menuWrap.offsetTop;
var staticStyle = {
position: 'relative',
top: 'initial',
left: 'initial',
right: 'initial',
'z-index': '1'
};
if(scrollTop < offsetTop){
var style = styleChange(staticStyle);
menu.setAttribute('style', style);
paddingWrap.style.paddingBottom = '0';
}else{
var style = styleChange(fixedStyle);
menu.setAttribute('style', style);
paddingWrap.style.paddingBottom = '50px';
}
}
滚动焦点是document，menu上方没有其他div
普通状态下的menu只需要把menu的样式定义为fixed布局就可以了
html文件（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>菜单栏自动顶置</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.menu{
max-width: 600px;
background-color: #ccc;
padding: 0;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.list{
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
color: #000;
width: 32%;
line-height: 50px;
height: 50px;
font-size: 14px;
padding: 0;
margin: 0;
}
.list.active{
color: red;
}
.box{
width: 300px;
height: 150px;
margin: 10px auto;
text-align: center;
line-height: 150px;
background-color: #CCC;
}
.red{
font-size: 50px;
color: red;
}
.yellow{
font-size: 50px;
color: yellow;
}
.blue{
font-size: 50px;
color: blue;
}
.green{
font-size: 50px;
color: green;
}
</style>
</head>
<body>
<!-- 滚动焦点是document menu上方没有其他div -->
<div id='menuWrap'>
<div class='menu' id='menu'>
<div class='list active'>主页</div>
<div class='list'>简介</div>
<div class='list'>讨论</div>
</div>
<div id='paddingWrap' ></div>
</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
滚动焦点是document，menu上方存在其他div
当menu控件在浏览器的中间位置，即menu控件上方还存在其他div时，需要注意的是，必须判断menu控件否滚动到与浏览器顶部位置吻合，menu控件才设置为fixed布局。
如图：
html文件（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>菜单栏自动顶置</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.header{
height:50px;
background-color: yellow;
}
.menu{
max-width: 600px;
background-color: #ccc;
padding: 0;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.list{
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
color: #000;
width: 32%;
line-height: 50px;
height: 50px;
font-size: 14px;
padding: 0;
margin: 0;
}
.list.active{
color: red;
}
.box{
width: 300px;
height: 150px;
margin: 10px auto;
text-align: center;
line-height: 150px;
background-color: #CCC;
}
.red{
font-size: 50px;
color: red;
}
.yellow{
font-size: 50px;
color: yellow;
}
.blue{
font-size: 50px;
color: blue;
}
.green{
font-size: 50px;
color: green;
}
</style>
</head>
<body>
<!-- 滚动焦点是document menu上方存在其他div -->
<div class='header'></div>
<div id='menuWrap'>
<div class='menu' id='menu'>
<div class='list active'>主页</div>
<div class='list'>简介</div>
<div class='list'>讨论</div>
</div>
<div id='paddingWrap' ></div>
</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
滚动焦点是其他dom，menu上方存在其他div
有时候，menu控件会存在于absolute布局的div中，若menu控件上方存在其他div，那么，我们js代码中需要把滚动事件的焦点由document更换为absolute布局的dom。
如图：
html文件（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>菜单栏自动顶置</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.header{
height:50px;
background-color: yellow;
}
.menu{
max-width: 600px;
background-color: #ccc;
padding: 0;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.list{
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
color: #000;
width: 32%;
line-height: 50px;
height: 50px;
font-size: 14px;
padding: 0;
margin: 0;
}
.list.active{
color: red;
}
.box{
width: 300px;
height: 150px;
margin: 10px auto;
text-align: center;
line-height: 150px;
background-color: #CCC;
}
.red{
font-size: 50px;
color: red;
}
.yellow{
font-size: 50px;
color: yellow;
}
.blue{
font-size: 50px;
color: blue;
}
.green{
font-size: 50px;
color: green;
}
.wrap{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
margin: 0 auto;
max-width: 600px;
}
</style>
</head>
<body>
<!-- 滚动焦点是其他dom menu上方存在其他div -->
<div class='wrap' id='scrollDom'>
<div class='header' id='scrollDomHeight'></div>
<div id='menuWrap'>
<div class='menu' id='menu'>
<div class='list active'>主页</div>
<div class='list'>简介</div>
<div class='list'>讨论</div>
</div>
<div id='paddingWrap' ></div>
</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
<div class='box red'>red</div>
<div class='box green'>green</div>
<div class='box yellow'>yellow</div>
<div class='box blue'>blue</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>