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 3,691 times, 2 visits today)