bootstrap怎麼設定固定定位
在bootstrap中，可以利用Affix外掛程式設定固定定位，該外掛程式可以透過自訂屬性data對任何元素進行固定定位，語法為「
」。
本教學操作環境：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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
