在本文中，我將介紹一個可以跟隨頁面滾動的層效果，當使用者滾動滑鼠滾輪或者拖動瀏覽器捲軸時，浮動層將跟隨滾動。我通過執行個體講解相關外掛程式的應用以及使用時注意事項。
該效果大多應用在企業網站的線上客服服務、電子商務網站的購物車以及商業網站的廣告條展示等場合。
在本例中，我用到了一個重要的外掛程式：scroll-follow，該外掛程式在當前主流瀏覽器IE6+， FF2+， Safari 3，and Opera 9均測試通過，具有可配置參數，使用簡單的特點。
XHTML
<div id="scroll" class="demo">
...任意你想展示的內容
</div>
只需要一個div層，內容任意。值得注意的是，如果你想把DIV展示在頁面左右兩邊，則應該把這個DIV放在緊跟<body>後。
CSS
.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee;
padding:10px; position:relative; margin-top:-290px;}
設定DIV的寬度和高度，並設定絕對位置position:relative以及距離頂部的值margin-top:-290px，這個290是怎麼算出來的呢？一看就明白：290=250+10x2+10x2即DIV高度+兩個margin值+兩個padding值。
jQuery首先引入jquery庫和scroll-follow.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scroll-follow.js"></script>
調用外掛程式非常簡單，代碼如下：
$(function(){
$("#scroll").scrollFollow();
});
你可以通過設定以下參數獲得更多的效果：
| 參數 | 描述 | 預設值 |
| speed | 滾動的間隔毫秒數，數值越小，滾動越快。 | 500 |
| offset | 距離滾動頂部的點數（pixels）。 | 0 |
| relativeTo | 設定滾動的DIV靠上還是靠下，可以設定為"top"或"bottom"。 | top |
| killSwitch | 開啟和取消跟隨滾動開關的元素ID，需要jQuery Cookie plugin支援。 | "killSwitch" |
| onText | 如果啟用了跟隨滾動，開關顯示的文字。 | "Turn Slide Off" |
| offText | 如果取消了跟隨滾動，開關顯示的文字。 | "Turn Slide On" |
官方網站還提供了delay和container兩個參數，用來控制滾動延時和滾動範圍，我覺得沒有多大實用意義，就不作描述了。
需要提醒的是，如果我想讓浮動的DIV層展示在頁面的右側，該怎麼辦？其實該外掛程式不具備此功能，我們需要做的就是通過CSS來定位浮動DIV的位置。
.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee;
padding:10px; position:absolute; margin-top:156px; right:10px;}
通過相對定位來確定浮動DIV層的位置，相當靈活，具體效果可以查看DEMO示範。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
