[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

jQueryを使った方法も記事にされているのですが、今回は、CSSを使って「ナビゲーションを固定し、スクロールしても動かないメニュー」を作成する方法を書きます。

jQueryを使った方法は、リンクをご参考に下さい。

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel [JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT




ヘッダーが固定されている例

position: fixed;

position: fixed; を使うと、要素を常に画面上の指定した位置に固定させておくことができる。




位置は、top,bottom,left,right で指定する。

header {
     position: fixed;
     top: 0;
}

要素の重なり順を指定する。

要素の重なり順を指定して、常に、ヘッダーが上部に来るようにする。

z-index プロパティ

z-index プロパティは、要素の重なり順を指定する際に用いる。




整数値で指定し、値が大きいほど上に表示されます。

header {
     position: fixed;
     top: 0;
     z-index: 10;
}

z-indexプロパティは必ずpositionプロパティと併用する必要がある。

(Visited 2,758 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください