合作(zuò)
咨詢
建站(zhàn)咨詢
- 作(zuò)者：admin
- 發表時(shí)間(jiān)：2013-07-02 14:17:21
- 來(lái)源：未知
在本文中，我将介紹一個(gè)可(kě)以跟随頁面滾動的層效果，當用戶滾動鼠标滾輪或者拖動浏覽器(qì)滾動條時(shí)，浮動層将跟随滾動。我通(tōng)過實例講解相關插件的應用以及使用時(shí)注意事項。
該效果大(dà)多(duō)應用在企業網站(zhàn)的在線客服服務、電(diàn)子商務網站(zhàn)的購物車(chē)以及商業網站(zhàn)的廣告條展示等場(chǎng)合。
在本例中，我用到了一個(gè)重要的插件：scroll-follow，該插件在當前主流浏覽器(qì)IE6+， FF2+， Safari 3，and Opera 9均測試通(tōng)過，具有(yǒu)可(kě)配置參數(shù)，使用簡單的特點。
XHTML
...任意你(nǐ)想展示的內(nèi)容
隻需要一個(gè)div層，內(nèi)容任意。值得(de)注意的是，如果你(nǐ)想把DIV展示在頁面左右兩邊，則應該把這個(gè)DIV放在緊跟後。
CSS
.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee;
padding:10px; position:relative; margin-top:-290px;}
設置DIV的寬度和(hé)高(gāo)度，并設置絕對位置position:relative以及距離頂部的值margin-top:-290px，這個(gè)290是怎麽算(suàn)出來(lái)的呢？一看就明(míng)白：290=250+10x2+10x2即DIV高(gāo)度+兩個(gè)margin值+兩個(gè)padding值。
jQuery
首先引入jquery庫和(hé)scroll-follow.js
調用插件非常簡單，代碼如下：
$(function(){
$("#scroll").scrollFollow();
});
你(nǐ)可(kě)以通(tōng)過設置以下參數(shù)獲得(de)更多(duō)的效果：
| 參數(shù) | 描述 | 默認值 |
| speed | 滾動的間(jiān)隔毫秒(miǎo)數(shù)，數(shù)值越小(xiǎo)，滾動越快。 | 500 |
| offset | 距離滾動頂部的點數(shù)（pixels）。 | 0 |
| relativeTo | 設置滾動的DIV靠上(shàng)還(hái)是靠下，可(kě)以設置為(wèi)"top"或"bottom"。 | top |
| killSwitch | 開(kāi)啓和(hé)取消跟随滾動開(kāi)關的元素ID，需要jQuery Cookie plugin支持。 | "killSwitch" |
| onText | 如果啓用了跟随滾動，開(kāi)關顯示的文字。 | "Turn Slide Off" |
| offText | 如果取消了跟随滾動，開(kāi)關顯示的文字。 | "Turn Slide On" |
官方網站(zhàn)還(hái)提供了delay和(hé)container兩個(gè)參數(shù)，用來(lái)控制(zhì)滾動延時(shí)和(hé)滾動範圍，我覺得(de)沒有(yǒu)多(duō)大(dà)實用意義，就不作(zuò)描述了。
需要提醒的是，如果我想讓浮動的DIV層展示在頁面的右側，該怎麽辦？其實該插件不具備此功能，我們需要做(zuò)的就是通(tōng)過CSS來(lái)定位浮動DIV的位置。
.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee;
padding:10px; position:absolute; margin-top:156px; right:10px;}
通(tōng)過相對定位來(lái)确定浮動DIV層的位置，相當靈活，具體(tǐ)效果可(kě)以查看DEMO演示。
