原创，水平有限，欢迎指导。
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
overflow-y: auto;
}
body.noVerticalScroll {
overflow-y: hidden;
}
.content {
position: relative;
padding-top: 80px;
}
.toolBar {
width:100%;
height:50px;
position: absolute;
display: none;
}
.toolBar.toolBarTop {
background-color:red;
top: -50px;
}
.toolBar.toolBarBottom {
background-color:yellow;
bottom: -50px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function ShowToolBar() {
$("body").addClass("noVerticalScroll");
$(".toolBar").show();
$(".toolBarTop").animate({ top: "0px" });
$(".toolBarBottom").animate({ bottom: "0px" }, null, null, function () {
$("body").removeClass("noVerticalScroll");
});
}
function HideToolBar() {
$("body").addClass("noVerticalScroll");
$(".toolBarTop").animate({ top: "-" + $(".toolBarTop").height() + "px" });
$(".toolBarBottom").animate({ bottom: "-" + $(".toolBarTop").height() + "px" }, null, null, ResetBodyOverflowY);
}
function ResetBodyOverflowY() {
$(".toolBar").hide();
$("body").removeClass("noVerticalScroll");
}
</script>
</head>
<body>
<div class="toolBar toolBarTop">AAA<br/>BBB</div>
<div class="content">
<input type="button" id="btnShow" value="Show" onclick="ShowToolBar();" />
<input type="button" id="btnHide" value="Hide" onclick="HideToolBar();" />
</div>
<div class="toolBar toolBarBottom">CCC<br/>DDD</div>
</body>
</html>
原文：http://www.cnblogs.com/laozuan/p/4211421.html