スクロールした時、headerを上部に固定表示する方法。
ヘッダーの固定は、 position: fixed; で簡単に出来ます。
この場合、headerが浮いた状態になる為、次のようなことが起こります。
- ① 次の要素の上部分がheaderの下にかくれてしまう。
headerの高さ分だけbodyやmainをpadding-topでずらすことで解決。
- ② スクロールしていくと、固定しているheaderに別の表示が重なってしまう。
この重なりを解消する為には、 z-index プロパティを使いレイヤーの重なり順を指定。
値の数字が大きいほうが上になります。
See the Pen dyYMZxb by yoshi (@yoshi58) on CodePen.
レスポンシブのように、ヘッダーの高さが可変する場合
Javascriptでヘッダーの高さを取得し、その高さ分「padding-top」を指定します。
See the Pen jObqYod by yoshi (@yoshi58) on CodePen.
html内へのcssとjqueryの読み込みの記述を忘れないようにしてください。
