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: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 7 梅留言

  • 第7梅
    李阿修 說道:

    請問如果要一直至頂
    不要小於100時,就關閉區塊~~能這樣修改嗎?

    回應:
    把//當高度小於100時,關閉區塊
      if($this_Top < 100){
       $('#top-bar').stop().animate({top:"-65px"});
       }
        if($this_Top > 100){
        $(‘#top-bar’).stop().animate({top:"0px"});
        }
      }).scroll();
    改成

      if($this_Top > 0){
       $(‘#top-bar’).stop().animate({top:"-65px"});
       }
      }).scroll();

    或是直接用css中的fixed也可以