每當在瀏覽網頁時，由於網頁內容很長，就會不斷的向下滾動，比較貼心的網站，會提供Top鈕，讓使用者可以快速置頂，再去瀏覽其它主題的內容，除此之外也有些網站，當頁面滾動超過一定的範圍後，上面的選單就會固定在上方，讓使用者可以不用滾動與置頂，就能透過上方的選單，快速的跳到其它主題中，除此之外這種固定式選單，也可加深網友對網站的印象，而這個看似很酷的浮動式固定選單，其實作法相當的簡單喔！梅干花了點時間將它簡化，讓各位可以無痛的套用，現在就一塊來看看。
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();
<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>
[ 範例預覽 ] | [ 範例下載 ]