グローバルメニューを移動・固定

メニューを移動し、固定する

ヘッダーの直下にあるナビゲーションが、スクロールすると、ページトップの位置に固定されるように実装します。また、固定されたメニューは、重なり順の一番手前へ設定することで、常にメニューバーが手前へ固定される配置が実現できます。

▶　【メニュー固定/サンプルを見る】

▶️神戸北野L’AVENUE(メニュー固定を採用)

固定するためのセレクターを記述する

positionをfixedに指定することで、位置が固定されます。また、z-indexプロパティは、ボックスの重なり順序を指定する際に使用します。 値が大きい要素ほど前面にきます。

▶　【メニュー固定/サンプルを見る】

CSSの記述

.fixed {
    position: fixed;/*----------------固定*/
    top: 0;
    z-index: 10000;/*重なり順を指定できる。値が大きい方が、前面配置になります。*/
}

---

.fixed {
 position: sticky;/*----------------移動して固定*/
 top: 0;
}

stickyを設定された要素は、指定した位置まで移動し、固定し、他に要素の上に重なります。

---

ナビゲーション部

上記の記述に合わせ、ナビゲーション部にidとclassを付与します。