首頁 > web前端 > 前端問答 > bootstrap怎麼設定固定定位

bootstrap怎麼設定固定定位

WBOY
發布: 2022-05-06 15:26:55
原創
3266 人瀏覽過

在bootstrap中,可以利用Affix外掛程式設定固定定位,該外掛程式可以透過自訂屬性data對任何元素進行固定定位,語法為「」。

bootstrap怎麼設定固定定位

本教學操作環境:Windows10系統、bootstrap3.3.7版、DELL G3電腦

bootstrap怎麼設定固定定位

固定定位--宣告式觸發固定定位

Affix 外掛程式可以對任何元素進行固定定位,其中比較簡單的方法,就是透過自訂屬性data 來觸發。其主要包括兩個參數:

1、data-spy:取值 affix,表示元素固定不變的。

2、data-offset:整數值,例如 90,表示元素 top 和 bottom 的值都是 90px,包含兩種方式:data-offset-top 和 data-offset-bottom。

data-offset-top 用來設定元素距離頂部的距離。例如 90,表示元素距離頂部 90px,當使用者從頂部向下拖曳滾動條,當滾動的距離大於 90px 時,affix 元素就不再滾動,就會固定在瀏覽器視窗頂部。

data-offset-bottom 剛好與 data-offset-top 相反。

具體使用如下:

<div data-spy="affix" data-offset="90">affix元素</div>
登入後複製

分開設定 data-offset 值方式:

<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
登入後複製

注意,在 body 要宣告滾動監控。

<body data-spy="scroll" data-target="sidebarMenu">
登入後複製

注意,請在寬螢幕模式下查看效果。就我測試下來,使用聲明式,就算設定了 data-offset-top 的值也會失效,需要在樣式中給 affix 設定一個top值,與 data-offset-top 值相等。 data-offset-bottom一樣。

相關推薦:bootstrap教學

#

以上是bootstrap怎麼設定固定定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板