cssでスクロールしても動かない固定ヘッダーを作る

今回はスクロールしても動かないヘッダーの作り方を紹介します。

htmlコード

<header>
  <h1 id="logo">Title logo</h1>
  <div id="header-list">
    <ul>
      <li><a href="#">MENU1</a></li>
      <li><a href="#">MENU2</a></li>
      <li><a href="#">MENU3</a></li>
      <li><a href="#">MENU4</a></li>
    </ul>
  </div>
</header>

解説

ヘッダー全体をheaderで囲み、タイトルロゴとメニューを作成します。

タイトルはh1要素で囲み、idにlogoを設定します。

メニュー部分をheader-listというクラス名を持ったdivで囲み、メニュー項目をulとli要素のリストで設定しています。

CSSコード

header {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1;
}

#logo {
  margin-bottom: 30px;
  font-size: 24px;
}

#header-list li {
  margin-bottom: 10px;
  font-size: 14px;
}

解説

ヘッダーを固定するために、headerで「position: fixed;」を指定します。

これでウィンドウの左上が基準位置になり固定されるので、そこからの表示位置はtopとleftで値を設定します。

今回は上から30px、左から30pxとしています。

また、ヘッダーが他の要素の後ろに回らないように「z-index: 1;」を指定します。

z-indexは値が大きいものほど上に表示されるようになっており、レイヤーのような感じです。

サンプル

サンプルでは画像サイズがウィンドウサイズによって変化するように指定しています。

See the Pen
QRgQRJ by leben_jpn (@leben_jpn)
on CodePen.

サンプルでは他にも色々な工夫しているので参考にしてみてください。