溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了bootstrap如何設(shè)置固定定位的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇bootstrap如何設(shè)置固定定位文章都會(huì)有所收獲，下面我們一起來看看吧。
在bootstrap中，可以利用Affix插件設(shè)置固定定位，該插件可以通過自定義屬性data對(duì)任何元素進(jìn)行固定定位，語法為“<element data-spy="affix" data-offset="元素距離頂部與底部的距離">”。
本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦
固定定位--聲明式觸發(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一樣。
關(guān)于“bootstrap如何設(shè)置固定定位”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“bootstrap如何設(shè)置固定定位”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
