2.置顶菜单
(1)移动前:
移动后:
(2)实现效果:用户拉动滚动条时,当菜单栏移动到顶部时不再移动,便于用户点击
(3)代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
}
.banner{
width:960px;
height:200px;
background-color:cyan;
margin:0 auto;
}
.menu{
width:960px;
height:80px;
background-color:gold;
margin:0 auto;
text-align:center;
line-height:80px;
}
.menu_back{
width:960px;
height:80px;
margin:0 auto;
display:none;
}
p{
text-align:center;
color:red;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$menu = $('.menu');
$menu_back = $('.menu_back');
$totop = $('.totop');
$(window).scroll(function(){
//console.log('abc');
// 获取滚动条滚动的高度
var iNum = $(document).scrollTop();
//document.title = iNum;
// 当滚动的高度大于菜单所在的高度,改变菜单的position
if(iNum>200)
{
$menu.css({
'position':'fixed',
'left':'50%',
'top':0,
'marginLeft':-480
});
$menu_back.show();
}
// 当小于使,则修改为static
else
{
$menu.css({
'position':'static',
'marginLeft':'auto'
});
//
$menu_back.hide();
}
})
})
</script>
</head>
<body>
<div class="banner"></div>
<div class="menu">菜单</div>
<div class="menu_back"></div>
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
(4)注意:当将菜单栏的position
属性修改为fixed
时,菜单栏会脱离文档流,导致菜单栏下面的文档流补充脱离后的空缺
即表现为当滚动条达到菜单所在位置那一瞬间,菜单固定在顶部,而原本位于菜单下的文本会消失的现象
要解决这个问题,可以多设置一个div
位于菜单栏div
下面,设置为display:none
,然后通过var iNum = $(document).scrollTop()
判断滚动条的高度超过一定程度就show()
显示或hide()
隐藏