前一陣子有網友問說是否能做到像 Apple Store 中滾動捲軸時的固定購物清單效果。



這樣的效果基本上是利用 position 屬性的 fixed 來做出來的，只是加上了一點特別的手腳。首先來看 HTML的架構：

檢視原始碼 HTML
 
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

<body>
	<div id="wrapper">
		<h1>jQuery 外掛 72 變</h1>
		<div id="desc">
			<img src="jquery_plugins_72.gif" />
			<ul>
				<li>品　牌： 男丁格爾</li>
				<li>編　號： AB001</li>
				<li>庫存量： 100億</li>
				<li>售　價： $1000</li>
			</ul>
			<p class="more">
				假設下面有一堆介紹...然後試著把捲軸往下滾↓
			</p>
		</div>
		<div id="sidebar">
			<div id="cart">
				<div class="header">購物車</div>
				<div class="middle">
					<div>您的購物車中有 0 件商品</div>
				</div>
			</div>
		</div>
	</div>
</body>

接著再利用 CSS 來排出個類似的樣式：

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

#wrapper {
	position: relative;
	width: 700px;
	margin: 0 auto;
}
 
#desc {
	float: left;
	width: 400px;
	border-right: 1px solid #f19;
}
 
.more {
	height: 2000px;	/* 只是為了讓網頁有捲軸 */
}
 
#sidebar {
	position: absolute;
	left: 400px;
	width: 180px;
	margin-left: 10px;
}
 
#cart {
	position: absolute;
}
 
/* 以下兩段是針對右邊的購物清單設計用(from 敗家梅購物王) */
#cart .header{
	width: 180px;
	height: 36px;
	background: url(cartSilder_header.gif) no-repeat;
	text-indent: -9999px;
}
 
#cart .middle {
	width: 168px;
	padding: 5px;
	border: 1px solid #ddd;
	border-top: none;
	font-size: 12px;
	text-align: center;
}

#cart 就是等等筆者想讓它能在捲動時能固定的區塊，目前的 position 是 absolute 的，所以當滾動捲軸時就會變成：



所以筆者接下來會利用 jQuery 來針對 #cart 的部份做控制：

檢視原始碼 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

$(function(){
	// 先取得 #cart 及其 top 值
	var $cart = $('#cart'),
		_top = $cart.offset().top;
 
	// 當網頁捲軸捲動時
	var $win = $(window).scroll(function(){
		// 如果現在的 scrollTop 大於原本 #cart 的 top 時
		if($win.scrollTop() >= _top){
			// 如果 $cart 的座標系統不是 fixed 的話
			if($cart.css('position')!='fixed'){
				// 設定 #cart 的座標系統為 fixed
				$cart.css({
					position: 'fixed',
					top: 0
				});
			}
		}else{
			// 還原 #cart 的座標系統為 absolute
			$cart.css({
				position: 'absolute'
			});
		}
	});
});

這邊能看到 #cart 的 position 屬性值會因捲軸的高度來做改變，也因為這樣的判斷就能產生出像 Apple Store 中一樣的效果了。



當然這樣的效果在 IE6 是無法呈現出來的，不過其它的瀏覽器應該是都沒問題的

資料來源

文章標籤
全站熱搜
創作者介紹
創作者 Y銘 的頭像
Y銘

ㄚ銘老師的部落格

Y銘 發表在 痞客邦 留言(0) 人氣(29)