メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

位置ヘルパー（Position） v5.0.0位置ユーティリティより分離

要素の位置を素早く設定するためにこれらのヘルパーを使用。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
このページの項目 v5.0.0位置ユーティリティより分離

最上部に固定（Fixed top）

ビューポートの上部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることをご確認下さい。追加CSSを追加する必要がある場合もあり。

設定例
<div class="fixed-top">...</div>
【設定】

最下部に固定（Fixed bottom）

ビューポートの下部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることをご確認下さい。追加CSSを追加する必要がある場合もあり。

設定例
<div class="fixed-bottom">...</div>
【設定】

最上部に達すると固定（Sticky top）

スクロールした後、要素をビューポートの上部に端から端に配置。

設定例
すべてのサイズのビューポートで上に固定<div class="sticky-top">...</div>
【設定】
  • 要素に .sticky-top を入れることで、その要素がスクロールして最上部に達すると固定される（ナビゲーションバーの配置などで使用）
【注意】
  • 要素の上に空白や別の要素がある場合は、要素が一番上までスクロールされるまで表示される

レスポンシブで最上部に達すると固定（Responsive sticky top） v5.0.0-alpha1新設

.sticky-top ヘルパークラスにはレスポンシブのバリエーションもある。

設定例
SM（小）以上のサイズのビューポートで上に固定<div class="sticky-sm-top">...</div>
MD (中) 以上のサイズのビューポートで上に固定<div class="sticky-md-top">...</div>
LG (大) 以上のサイズのビューポートで上に固定<div class="sticky-lg-top">...</div>
XL (特大) 以上のサイズのビューポートで上に固定<div class="sticky-xl-top">...</div>
XXL (超特大) 以上のサイズのビューポートで上に固定<div class="sticky-xxl-top">...</div>
【設定】
  • 要素に .sticky-{breakpoint}-top を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる

最下部に達するまで固定（Sticky bottom）v5.2.0新設

ビューポートの最下部に、端から端まで要素を配置。ただし、ページのスクロールがあるときのみ配置。

設定例
すべてのサイズのビューポートで最下部に固定<div class="sticky-bottom">...</div>
【設定】
  • 要素に .sticky-bottom を入れることで、ページのスクロールがあれば、その要素が最下部に固定される（ナビゲーションバーの配置などで使用）
【注意】
  • 要素の下に空白や別の要素がある場合は、スクロールが一番下まで移動すると表示される

レスポンシブで最下部に達するまで固定（Responsive sticky bottom） v5.2.0新設

.sticky-bottom ヘルパークラスにはレスポンシブのバリエーションもある。

設定例
SM（小）以上のサイズのビューポートで下に固定<div class="sticky-sm-bottom">...</div>
MD (中) 以上のサイズのビューポートで下に固定<div class="sticky-md-bottom">...</div>
LG (大) 以上のサイズのビューポートで下に固定<div class="sticky-lg-bottom">...</div>
XL (特大) 以上のサイズのビューポートで下に固定<div class="sticky-xl-bottom">...</div>
XXL (超特大) 以上のサイズのビューポートで下に固定<div class="sticky-xxl-bottom">...</div>
【設定】
  • 要素に .sticky-{breakpoint}-bottom を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる

Sass v5.1.0追加

デフォルトの設定
scss/helpers/_position.scss の設定// ショートハンド

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-fixed;
}

// レスポンシブで最上部と最下部に貼りつき固定
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .sticky#{$infix}-top {
      position: sticky;
      top: 0;
      z-index: $zindex-sticky;
    }

    .sticky#{$infix}-bottom {
      position: sticky;
      bottom: 0;
      z-index: $zindex-sticky;
    }
  }
}