Home » jQuery 應用

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

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

前一陣子有網友問說是否能做到像 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 來排出個類似的樣式：

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

範例 1

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

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

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

    • 暫時先請各位先直接到範例網頁中檢視原始碼後另存吧, 檔案我會一一補上, 未來可能直接租個專用的檔案空間。

  4. 通告： 基礎技術 | hoyo 學習紀錄

  6. 除了梅問題，就屬男老師(？！)這裡最讓我受用了！
    其實我還不懂jQuery，但是看著範本操作也是成功了
    今後我也會繼續來拜讀。

  7. 您好，我現在在我blog也加入該語法，讓我的bar也可以跟著捲軸跑，不過遇到一些問題，
    在chrome瀏覽器下，顯示是正常的，

    但在ie之下（非ie6） 在捲動視窗時，那個bar竟然會變透明，但碰該位置時，bar又會跑出來，隨後再捲動視窗後，該bar又不見了....不知道該怎麼辦，可否看我的語法是否有錯誤呢，謝謝

    【我的連結在此：http://hotnewsla.pixnet.net/blog】，可看右半邊部分(暫放的)

    #box427672 {
    position: absolute;
    background:#ffffff;
    }
    .box-title{ display:none;}

    $(function(){
    // 先取得 #cart 及其 top 值
    var $box427672 = $('#box427672'),
    _top = $box427672.offset().top;

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

  8. 想請問版大，我想做一個類似您上述的 範例，內容如：固定選單在左側，點選左側選單，內容則可顯示在右方的網頁，但不知語法該如何下，可否請大大教學，感謝您

發表迴響