站長(zhǎng)資訊網(wǎng)
在bootstrap中，可以利用Affix插件設(shè)置固定定位，該插件可以通過自定義屬性data對(duì)任何元素進(jìn)行固定定位，語(yǔ)法為“<element data-spy="affix" data-offset="元素距離頂部與底部的距離">”。
本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦
bootstrap怎么設(shè)置固定定位
固定定位–聲明式觸發(fā)固定定位
Affix 插件可以對(duì)任何元素進(jìn)行固定定位，其中比較簡(jiǎn)單的方法，就是通過自定義屬性 data 來觸發(fā)。其主要包括兩個(gè)參數(shù)：
1、data-spy：取值 affix，表示元素固定不變的。
2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。
data-offset-top 用來設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶從頂部向下拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)的距離大于 90px 時(shí)，affix 元素不再滾動(dòng)，就會(huì)固定在瀏覽器窗口頂部。
data-offset-bottom 剛好與 data-offset-top 相反。
具體使用如下：
<div data-spy="affix" data-offset="90">affix元素</div>
分開設(shè)置 data-offset 值方式：
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
注意，在 body 要聲明滾動(dòng)監(jiān)控。
<body data-spy="scroll" data-target="sidebarMenu">
注意，請(qǐng)?jiān)趯捚聊Ｊ较虏榭葱Ч?jù)我測(cè)試下來，使用聲明式，就算設(shè)置了 data-offset-top 的值也會(huì)失效，需要在樣式中給 affix 設(shè)置一個(gè)top值，與 data-offset-top 值相等。data-offset-bottom一樣。
