[jQ]仿 Apple Store 的固定購物清單捲動效果

沒錯!只要 1,800 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

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

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

<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 來排出個類似的樣式：

檢視原始碼 CSS

#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

$(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 是無法呈現出來的，不過其它的瀏覽器應該是都沒問題的唷！

範例 1

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

也許您對這些文章也有興趣

6 筆針對 [jQ]仿 Apple Store 的固定購物清單捲動效果的迴響

min 於 2011-11-01 15:50:36 說：

請問如果要讓 #cart 一開始就"置底"的話，css要怎要設呢?

回覆 ↓
- 男丁格爾於 2011-11-04 17:34:57 說：
  
  你的底是指網頁的底?還是瀏覽器的底呢?
  可以先試著看看 position 的 absolute 及 fixed
  
  回覆 ↓
Simon 於 2011-11-21 10:03:02 說：

版大~~感謝你提供這麼好的分享，目前此範例置放於訊6，但目前訊6關閉了，所以沒辦法下載範例，不知版大可以另行提供下載處嗎?感謝你唷^^

回覆 ↓
- 男丁格爾於 2011-11-22 16:49:33 說：
  
  暫時先請各位先直接到範例網頁中檢視原始碼後另存吧, 檔案我會一一補上, 未來可能直接租個專用的檔案空間。
  
  回覆 ↓
kkllppyy 於 2012-03-05 15:09:22 說：

不知道100億本的庫存賣完了沒有...(咦XD)

回覆 ↓
- 男丁格爾於 2012-03-06 11:47:25 說：
  
  我忘了把結帳的功能放上去了 XD
  
  回覆 ↓

男丁格爾's 脫殼玩

[jQ]仿 Apple Store 的固定購物清單捲動效果

也許您對這些文章也有興趣

6 筆針對 [jQ]仿 Apple Store 的固定購物清單捲動效果的迴響

發表迴響取消回覆

也許您對這些文章也有興趣

6 筆針對 [jQ]仿 Apple Store 的固定購物清單捲動效果 的迴響

發表迴響 取消回覆

6 筆針對 [jQ]仿 Apple Store 的固定購物清單捲動效果的迴響

發表迴響取消回覆