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

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

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

関連記事

1.　常時固定する

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.　途中から表示する

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.　サイズを小さくする（縦幅）

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

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

design_book

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

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

お得ニュース

apple_sale_210810

AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中
mousepc_210805_01

ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール 第2弾が開催

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note

S