Home » jQuery 外掛

[jQ]Sticky Sidebar

[ 日期： | 瀏覽：13,740 | 迴響：5 ]
範例 1
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



很多網站都會有那個浮動的選單或是類似 Follw Me 的區塊。當網頁捲軸往下滾動到遮到指定區塊時，Sticky Sidebar 能讓它們像跟屁蟲一樣再度往下跑出來，讓你想不注意到也難。同時還能限制區塊是否能超過上層的範圍呢！


套件名稱：Sticky Sidebar
套件版本：N/A
作者網站：http://www.profilepicture.co.uk/tutorials/sticky-sidebar-jquery-plugin/
套件網址：N/A
發佈日期：2011-05-11
檔案大小：4.67 KB
檔案下載：stickysidebar.jquery.js
引用檔案：jquery.easing.1.3.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

speed(選填)
描述： 動畫速度(1000毫秒 = 1秒)
預設值： 350
 
easing(選填)
描述： 當動畫執行時的緩變效果
預設值： 'linear'
 
padding(選填)
描述： stickySidebar 區塊距離網頁的上邊距
預設值： 10
 
constrain(選填)
描述： 是否讓 stickySidebar 區塊能移動超出上層的區塊
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 幫指定的區塊加上 stickySidebar 效果
$(selector).stickySidebar(settings);
 
// 在已有 stickySidebar 效果的指區塊中執行 stickySidebar 其它的功能指令
$(selector).stickySidebar(method);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="stickysidebar.jquery.js"></script>
<style type="text/css">
	#wrap { 
		width: 800px;
		margin: 0 auto;
	}
	#right {
		width: 200px;
		float: left;
	}
	#middle {
		width: 400px;
		float: left;
		height: 2000px;
	}
	#left { 
		width: 178px; 
		height: 800px; 
		float: left; 
		border: solid 1px red; 
		position: relative;
		padding: 10px;
	}
	#navbox { 
		list-style: none;
		margin: 0;
		padding: 10px 10px 0 10px;
		border: solid 1px silver;
		height: 200px;
	}
	#navbox li {
		margin: 0 0 10px 0;
	}
	#basket {
		border: solid 1px silver;
		padding: 10px;
		background: white;
		position: relative;
	}
	#basket h3 {
		margin: 0 0 15px 0;
	}
	#basket p 
		margin: 32px 0 0 0;
		text-align: right;
		font-size: 1.2em;
	}
	#realtest { 
		position: absolute; 
		left: 20px; 
		top: 450px; 
		height: 300px; 
		width: 300px; 
		border: solid 2px black;
	}
	#floatedbox {
		width: 150px;
		height: 150px;
		background-color: white; 
		position: absolute; 
		top: 10px; 
		left: 20px; 
		border: solid 1px silver;
		padding: 10px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把所有 .stickybox 區塊都加上 stickySidebar 效果
		// 動畫時間 0.4 秒, 移動效果 easeInOutQuad
		// 同時限制不要超出上層區塊
		$(".stickybox").stickySidebar({
			speed: 400,
			easing: "easeInOutQuad", 
			constrain: true
		});
 
		// 當 .remove 鏈結點擊時, 移除指定區塊的 stickySidebar 效果
		$(".remove").click(function (ev) {
			$("#" + this.rel).stickySidebar("remove");
			return false;
		});
 
		// 移除全部區塊的 stickySidebar 效果
		$("#destroyAll").click(function (ev) {
			$(".stickybox").stickySidebar("destroy");
			return false;
		});
	});
</script>
 
<body>
	<div id="wrap">
		<div id="left">
			<h2>左側邊欄</h2>
			<ol id="navbox" class="stickybox">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ol>
        </div>
 
		<div id="middle">
			<ul>
				<li>
				  <a href="#" class="remove" rel="navbox">移除左側邊欄效果</a>
				</li>
				<li>
				  <a href="#" class="remove" rel="basket">移除右側邊欄效果</a>
				</li>
				<li>
				  <a href="#" class="remove" rel="floatedbox">移除浮動區塊效果</a>
				</li>
				<li>
				  <a href="#" id="destroyAll">移除全部的效果</a>
				</li>
			</ul>
		</div>
 
		<div id="right">
			<h2>右側邊欄</h2>
			<div id="basket" class="stickybox">
				<h3>Your basket</h3>
				<p>Total: <strong>&pound;455.00</strong></p>
				<span id="items">4</span>
			</div>
        </div>
	</div>
 
	<div id="realtest">
      <div id="innerposi">
        <div id="floatedbox" class="stickybox">浮動區塊</div>
      </div>
    </div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

5 筆針對 [jQ]Sticky Sidebar 的迴響

  2. 男丁大您好，今天使用了這個JQ工具，原本想利用於phpBB的快捷按鈕(回最頂端)，在長度一般的頁面來說沒問題，一旦頁面圖片較多Loading較久，Sticky Sidebar似乎就抓不準「頁面長度」，可能會滑到半途就消失，嘗試將javascript放在或前，雖有改善，但client已經快取JS，再換一頁就無效了，範例請參考：
    http://tomy168.twbbs.org/mytest3/viewtopic.php?f=50&t=406

    嘗試許久仍無法解決，還是得請高手協助，謝謝！

  3. 已解決了，最後用$(window).load(function(){
    });
    把這個工具的javascript包起來後運作正常
    不過有些不懂的地方，我同學說原本的$(function(){
    就已經是頁面的所有東西，都產生完之後，才會觸發。
    請問是我同學誤會了嗎

    • $(fn) 則指是當網頁的 dom 載完就會執行了，所以當圖片未載完時就已經會執行。
      而$(window).onload(fn) 是指當網頁內容全載完時才會執行的動作；有些圖片可能會影響你的網頁的高度，所以要抓到正確的高度時，得把其它元素考慮進去。

  4. 男丁大！我找了一個類似的外掛.. 他引入的 JQ 檔案在 http://jq.jarviskuo.com/jquery.sticky.js 可是我需要某個指定 DIV 圖層在限制範圍內滑動，卻不知道怎麼改.. 這隻外掛只需要再檔頭引入 JS 檔案，另外在檔頭加入

    $(window).load(function(){
    $("#nav, .jq_time").sticky({ topSpacing: -1});
    });

    可是沒有給我設置停止滑動的部份，懇請男丁大支援！

    問題頁面：http://www.jarviskuo.com/icar/maintain/Palfd6665=zh_TW
    左邊的日期會一直不停的滑動，到頁底會蓋到其他部分.. 所以我希望他停在文章的尾巴就隨頁面卷上去..

發表迴響