jQuery教學-浮動式固定上選單

分類:Javascript | 2013-08-16
梅問題-jQuery教學-浮動式固定滑動選單
  每當在瀏覽網頁時,由於網頁內容很長,就會不斷的向下滾動,比較貼心的網站,會提供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();

  //當高度小於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>

[ 範例預覽 ] | [ 範例下載 ]




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 5 梅留言

  • 第5梅
    卡卡 說道:

    您好~

    這方法不適用IE8耶@@
    請問有沒有解決方法呢

    回應:
    IE8需透過js方式才能完成
  • 第4梅
    HIROKING 說道:

    請問站大,若我是痞客邦使用者,我想請你協助從第一篇文章的上方開始出現浮動式固定上選單,
    應該要怎麼修改呢?不知有沒有提供諮詢服務,非常感謝。

    回應:
    關於這部分,得看看痞克邦可否嵌入CSS與js的碼,
    由於太久沒用了,對於痞克邦現在的環境不是很了解