アマゾンプライムデー開催中!6/22まで 

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を削除するように指定

【開催中】お得情報

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加