メインコンテンツへスキップ

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

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

目次

最上部に固定（Fixed top）

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

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

 

最下部に固定（Fixed bottom）

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

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

 

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

スクロールした後、要素をビューポートの上部に端から端に配置。.sticky-top ユーティリティはCSSの position: sticky を使用。これはすべてのブラウザで完全にサポートされていない。

設定例
すべてのサイズのビューポートで上に固定<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（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる

 

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;
    }
  }
}