溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了bootstrap如何設置固定定位的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇bootstrap如何設置固定定位文章都會有所收獲，下面我們一起來看看吧。
在bootstrap中，可以利用Affix插件設置固定定位，該插件可以通過自定義屬性data對任何元素進行固定定位，語法為“<element data-spy="affix" data-offset="元素距離頂部與底部的距離">”。
本教程操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦
固定定位--聲明式觸發固定定位
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如何設置固定定位”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
