在bootstrap中,可以利用Affix插件設置固定定位,該插件可以通過自定義屬性data對任何元素進行固定定位,語法為“<element data-spy="affix" data-offset="元素距離頂部與底部的距離">”。
本教程操作環(huán)境:Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦
bootstrap怎么設置固定定位
固定定位–聲明式觸發(fā)固定定位
Affix 插件可以對任何元素進行固定定位,其中比較簡單的方法,就是通過自定義屬性 data 來觸發(fā)。其主要包括兩個參數:
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 要聲明滾動監(jiān)控。
<body data-spy="scroll" data-target="sidebarMenu">
注意,請在寬屏模式下查看效果。據我測試下來,使用聲明式,就算設置了 data-offset-top 的值也會失效,需要在樣式中給 affix 設置一個top值,與 data-offset-top 值相等。data-offset-bottom一樣。