CSS樣式：
放在<head>.....</head>之間：
#top-bar{
width:100%;
height:50px;
background:#32b3bf;
position:fixed;
top:-65px;
/* CSS3 陰影*/
-webkit-box-shadow: 0px 8px 15px #333;
-moz-box-shadow: 0px 8px 15px #333;
box-shadow: 0px 8px 15px #333;
}
Javascript：
放在<head>.....</head>之間：
這邊梅干是設定當滾動超過100像素時，上面選單就滑出，若要再多一點的話，可自行修改this_Top中的數值，若要改變上選單高度時，再修改top:後方的數值即可。
<script type='text/javascript' src="jquery-1.9.1.min.js"></script>
<script type='text/javascript'>
$(function(){
$(window).load(function(){
$(window).bind('scroll resize', function(){
var $this = $(this);
var $this_Top=$this.scrollTop();
//當高度小於100時，關閉區塊
if($this_Top < 100){
$('#top-bar').stop().animate({top:"-65px"});
}
if($this_Top > 100){
$('#top-bar').stop().animate({top:"0px"});
}
}).scroll();
});
});
</script>
<script type='text/javascript'>
$(function(){
$(window).load(function(){
$(window).bind('scroll resize', function(){
var $this = $(this);
var $this_Top=$this.scrollTop();
//當高度小於100時，關閉區塊
if($this_Top < 100){
$('#top-bar').stop().animate({top:"-65px"});
}
if($this_Top > 100){
$('#top-bar').stop().animate({top:"0px"});
}
}).scroll();
});
});
</script>
HTML：
放在<body>.....</body>之間：
<div id="top-bar"></div>
[ 範例預覽 ] | [ 範例下載 ]