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

梅問題-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>

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

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

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

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

共 13 梅留言

  • 第2梅
    求問 說道:

    請問如果想要在滾動後讓他更快跑出來怎麼做?

    回應:
    加入滾動式動畫就可以了
  • 第1梅
    one 說道:

    請問連結都是已經失效了嗎?

    回應:
    沒有喔!!還可以下載~
1 3 4 5