CSS ヘッダー固定パターン 3選

CSSでヘッダーを固定する方法をいくつか紹介します。

1. 常時固定する
2. 途中から表示する
3. サイズを小さくする（縦幅）

関連記事

• イチから作るヘッダーの作り方
• ヘッダー デザインテンプレート

1.　常時固定する

See the Pen
css fixed header 01 by kura (@kuranopen)
on CodePen.

HTML

<header id="header">
  <div class="inner">
    <p class="logo">COMPANY</p>
    <ul class="navi">
      <li><a href="#">選ばれる理由</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">制作事例</a></li>
    </ul>
  </div>
</header>

CSS

header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  background: #eee;
  box-sizing: border-box;
}

• position: fixedで固定させ、top: 0 left: 0で最低限位置を指定しています

2.　途中から表示する

See the Pen
css fixed header 01 by kura (@kuranopen)
on CodePen.

HTML

<header id="header">
  <div class="inner">
    <p class="logo">COMPANY</p>
    <ul class="navi">
      <li><a href="#">選ばれる理由</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">制作事例</a></li>
    </ul>
  </div>
</header>

CSS

header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  background: #eee;
  box-sizing: border-box;
  transition: padding .3s;
}
#header.scroll {
  padding: 10px 40px;
}

• position: fixedで固定させ、top: 0 left: 0で最低限位置を指定しています
• Javascriptで付与するスクロール時のクラス#header.scrollで大きさを指定します

Javscript

$(function () {
  var $header = $("#header");
  $(window).on("load scroll", function () {
    var value = $(this).scrollTop();
    if (value > 0) { //スクロールしたら.scroll付与
      $header.addClass("scroll");
    } else {
      $header.removeClass("scroll");
    }
  });
});

• if (value > 0)で1px以上スクロールしたら.scrollを付与するように指定
• eleseにスクロールを戻した時に.scrollを削除するように指定

3.　サイズを小さくする（縦幅）

See the Pen
css fixed header 01 by kura (@kuranopen)
on CodePen.

HTML

<header id="header">
  <div class="inner">
    <p class="logo">COMPANY</p>
    <ul class="navi">
      <li><a href="#">選ばれる理由</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">制作事例</a></li>
    </ul>
  </div>
</header>

CSS

header {
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  box-sizing: border-box;
}
#header.scroll {
  position: fixed;
  background: #EEE;
  animation-name: anime;
  animation-duration: 0.3s;
}
@keyframes anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

• position: fixedで固定させ、top: 0 left: 0で最低限位置を指定しています
• Javascriptで付与するスクロール時のクラス#header.scrollで表示時のCSSアニメーションを指定

Javscript

$(function () {
  var $header = $("#header");
  var scrollSize = 800; //超えると表示
  $(window).on("load scroll", function () {
    var value = $(this).scrollTop();
    if (value > scrollSize) {
      $header.addClass("scroll");
    } else {
      $header.removeClass("scroll");
    }
  });
});

• if (value > scrollSize )で指定したスクロール量を超えた場合に.scrollを付与するように指定
• eleseにスクロールを戻した時に.scrollを削除するように指定

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選