最上部に固定(Fixed top)
ビューポートの上部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることを確認すること。追加CSSを追加する必要がある場合もあり。
設定例
<div class="fixed-top">...</div>
【設定】
- 要素に
.fixed-top
を入れることで、その要素を画面の最上部に固定(ナビゲーションバーの固定などで使用)
最下部に固定(Fixed bottom)
ビューポートの下部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることを確認すること。追加CSSを追加する必要がある場合もあり。
設定例
<div class="fixed-bottom">...</div>
【設定】
- 要素に
.fixed-bottom
を入れることで、その要素を画面の最下部に固定(ナビゲーションバーの固定などで使用)
最上部に達すると固定(Sticky top)
スクロールした後、要素をビューポートの上部に端から端に配置。.sticky-top
ユーティリティはCSSの position: sticky
を使用。これはすべてのブラウザで完全にサポートされていない。
設定例
<div class="sticky-top">...</div>
【設定】
- 要素に
.sticky-top
を入れることで、その要素がスクロールして最上部に達すると固定される(ナビゲーションバーの固定などで使用)
レスポンシブで最上部に達すると固定(Responsive sticky top) v5.0.0-alpha1新設
.sticky-top
ユーティリティにレスポンシブのバリエーションも存在。
設定例
<div class="sticky-sm-top">SM(小)以上のサイズのビューポートで上に固定</div>
<div class="sticky-md-top">MD (中) 以上のサイズのビューポートで上に固定</div>
<div class="sticky-lg-top">LG (大) 以上のサイズのビューポートで上に固定</div>
<div class="sticky-xl-top">XL (特大) 以上のサイズのビューポートで上に固定</div>
<div class="sticky-xxl-top">XXL (超特大) 以上のサイズのビューポートで上に固定</div>
【設定】
- 要素に
.sticky-{breakpoint}-top
を入れる{breakpoint}
(sm
(小),md
(中),lg
(大),xl
(特大),xxl
(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる