jQuery實現浮動層跟隨頁面滾動效果

2021-06-12 23:40:38 字數 1320 閱讀 5392

在本文中,我將介紹乙個可以跟隨頁面滾動的層效果,當使用者滾動滑鼠滾輪或者拖動瀏覽器滾動條時,浮動層將跟隨滾動。我通過例項講解相關外掛程式的應用以及使用時注意事項。

在本例中,我用到了乙個重要的外掛程式:scroll-follow,該外掛程式在當前主流瀏覽器ie6+, ff2+, safari 3,and opera 9均測試通過,具有可配置引數,使用簡單的特點。

xhtml

id="scroll"

class="demo"

>

...任意你想展示的內容 

只需要乙個div層,內容任意。值得注意的是,如果你想把div展示在頁面左右兩邊,則應該把這個div放在緊跟後。

.demo 

設定div的寬度和高度,並設定絕對位置position:relative以及距離頂部的值margin-top:-290px,這個290是怎麼算出來的呢?一看就明白:290=250+10x2+10x2即div高度+兩個margin值+兩個padding值。

jquery

首先引入jquery庫和scroll-follow.js

呼叫外掛程式非常簡單,**如下:

$(function()); 

你可以通過設定以下引數獲得更多的效果:

引數描述

預設值speed

滾動的間隔毫秒數,數值越小,滾動越快。

500offset

距離滾動頂部的點數(pixels)。

0relativeto

設定滾動的div靠上還是靠下,可以設定為"top"或"bottom"。

topkillswitch

開啟和取消跟隨滾動開關的元素id,需要jquery cookie plugin支援。

"killswitch"

ontext

如果啟用了跟隨滾動,開關顯示的文字。

"turn slide off"

offtext

如果取消了跟隨滾動,開關顯示的文字。

"turn slide on"

官方**還提供了delay和container兩個引數,用來控制滾動延時和滾動範圍,我覺得沒有多大實用意義,就不作描述了。

需要提醒的是,如果我想讓浮動的div層展示在頁面的右側,該怎麼辦?其實該外掛程式不具備此功能,我們需要做的就是通過css來定位浮動div的位置。

.demo 

通過相對定位來確定浮動div層的位置,相當靈活,具體效果可以檢視demo演示。

jQuery實現浮動層跟隨頁面滾動效果

helloweba.com author 月光光 time 2010 11 29 09 02 tag jquery滾動 在本文中,我將介紹乙個可以跟隨頁面滾動的層效果,當使用者滾動滑鼠滾輪或者拖動瀏覽器滾動條時,浮動層將跟隨滾動。我通過例項講解相關外掛程式的應用以及使用時注意事項。在本例中,我用到了...

jQuery 遮罩層 浮動框

因為css不熟,實現總是搞不定ie6,所以結合用jquery了。1.遮罩層 指令碼 onevent function maskdiv css width body width maskdiv css height body heigth maskdiv show 要點 獲取body的大小。2.浮動框...

禁止蒙層底部頁面跟隨滾動

彈窗是一種常見的互動方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的互動。但是,在蒙層元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙層底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。那麼,如何阻止呢?請看以下分析 overflow hidden he...