怎麼讓div懸浮在網頁的固定地方?

很多網站的側欄都有固定懸浮的圖片或者廣告,很漂亮吧。

方法/步驟

雖然原生態的讓div懸浮更有學習的價值,但是相對來說原生態的更加複雜,還有各種相容問題要處理,著實煩死人。反正只要達到效果就好。感興趣的同學可以自己再研究一下。

我們要利用的工具是

jquery.pin (百度搜索jquery.pin)下載一個。

怎麼讓div懸浮在網頁的固定地方

然後解壓後我們在該資料夾目錄下新建一個html檔案。

怎麼讓div懸浮在網頁的固定地方

編輯這個網頁,在裡面引入jquery.pin。

具體程式碼如下:

怎麼讓div懸浮在網頁的固定地方

我們現在要做的就是,讓如圖中的紫色div碰到螢幕頂後自動隨著滾動而懸浮在頂部。

怎麼讓div懸浮在網頁的固定地方

做好後隨著滾動而滾動了。後面我會把原始碼發出來。

上面我們引入了檔案後。


(這段程式碼裡面的.pinned是你要懸浮的div,也就是圖中的紫色class屬性。.b是這個懸浮div懸浮的範圍。)

怎麼讓div懸浮在網頁的固定地方

懸浮div的不是懸浮的,當懸浮div滾到上面去了,懸浮div(即.pinned)也會隨著滾動條而滾動。

怎麼讓div懸浮在網頁的固定地方

下面附上整個原始碼,點開看即可。

注意事項

浮動框儘量不要再設定左右浮動,不然會出問題。

圖片, 網頁, 地方, 側欄,
相關問題答案