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>

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

相關文章

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

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

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

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

Google Closure Compiler壓縮器將Javascript最佳化廋身

Google Closure Compiler壓縮器將Javascript最佳化廋身

jQuery外掛-360度旋轉產品照片展示

jQuery外掛-360度旋轉產品照片展示

jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

jQeury外掛「Infinite Scroll」滾動無限載入網頁內容




回應本篇 »

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

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

共 12 梅留言

  • 第1梅
    one 說道:

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

    回應:
    沒有喔!!還可以下載~