jQueryのコピペでヘッダーにアニメーションをつけて固定表示させるスニペット

2021年12月8日 4分

ヘッダーは、主にページの上部に位置するコンポーネントで、サイトやブログなら各メニューを表示したり、どのページが開かれても常に共通して表示されます。

この記事は、そんなヘッダーを少しカスタマイズするスニペットで、特にブログのヘッダーにオススメです。

かかかず

コピペでできるので、試してみてください。

この記事では、ヘッダーにjQueryでアニメーションをつけるスニペットについて解説していきます。

実装後のサンプル
実装の手順と方法
コピペ用コード一式
ざっくりとしたコードの解説

実装後のサンプル

早速実装後のサンプルです。

最初のh2タグ到達の前に、上からheaderが落ちてきてロゴが左から右にフェードインします。そして、header はスクロールしても上部に固定表示されます。

かかかず

この記事のPCのみ適応させているので、PCでご覧ください。

実装の手順と方法

実装の手順と方法について解説していきます。全部で3つのSTEPですが、WordPressテーマSANGO以外の場合は、3つのSTEP完了後、以下のようにclassと idを付与するようにしましょう。

SANGO以外のテーマでは、別途classとidの付与が必要

このスニペットは、WordPressテーマSANGO用です。その為、HTMLのコードは記載していません。その為、別テーマでの利用の場合、ヘッダータグのclassに.header。ロゴに該当するタグへidの #logo が必要です。

jQuery本体の組み込み

jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

jQueryのコピペ

次にjQueryのコードをコピペします。以下のコードを<body>〜</body> のクロージングタグ直前に記述します。

jQuery

// スクロールすると上部にヘッダー固定
$(function () {
  $(window).on("scroll", function () {
    // 最初のh2を通過したらclassを付与 
    const sliderHeight = $("h2:first").height();
    if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".header").addClass("headerColorScroll");
      $("#logo").addClass("headerColorScroll");
    } else {
      $(".header").removeClass("headerColorScroll");
      $("#logo").removeClass("headerColorScroll");
    }
  });
});

CSSをコピペ

最後に、以下のCSSをコピペします。

CSS

@media only screen and (min-width: 769px) {
.header.headerColorScroll {
    animation: top-in-basic 1 0.4s 0s;
    position: fixed;
    top: 0;
    width: 100%;
}
.h1.dfont.headerColorScroll {
    animation: left-in-basic 1 0.8s 0s;
}
}

@keyframes top-in-basic {
  0%{transform: translateY(-2000px)}
  100%{transform: translateY(0px)}
}
@keyframes left-in-basic {
  0%{transform: translateX(-2000px)}
  100%{transform: translateX(0px)}
}

かかかず

これで完成です。

コピペ用コード一式

コピペ用コード一式です。上記手順の中で紹介のコードと一緒のものです。

コードを表示する

CSS

@media only screen and (min-width: 769px) {
.header.headerColorScroll {
    animation: top-in-basic 1 0.4s 0s;
    position: fixed;
    top: 0;
    width: 100%;
}
.h1.dfont.headerColorScroll {
    animation: left-in-basic 1 0.8s 0s;
}
}

@keyframes top-in-basic {
  0%{transform: translateY(-2000px)}
  100%{transform: translateY(0px)}
}
@keyframes left-in-basic {
  0%{transform: translateX(-2000px)}
  100%{transform: translateX(0px)}
}

jQuery

// スクロールすると上部にヘッダー固定
$(function () {
  $(window).on("scroll", function () {
    // 最初のh2を通過したらclassを付与 
    const sliderHeight = $("h2:first").height();
    if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".header").addClass("headerColorScroll");
      $("#logo").addClass("headerColorScroll");
    } else {
      $(".header").removeClass("headerColorScroll");
      $("#logo").removeClass("headerColorScroll");
    }
  });
});

ざっくりとしたコードの解説

コピペ用コードのCSSとjQueryについて、ざっくりとしていますが解説します。

jQuery：sliderHeight で発火条件の指定

冒頭にあるconst で、対象のタグやclassを指定します。

ここでは、$("h2:first") の初めのh2タグ を指定しています。ここのh2:first をclassやidへ変更することで発火条件を変えることができます。

jQuery

const sliderHeight = $("h2:first").height();

jQuery：addClassとremoveClassでclassの追加・削除

addClass でCSSのclassを追加して、removeClass でclassを削除します。この2つがif構文で分岐していて、関数宣言したsliderHeight 上部にスクロールが来た時に、classの追加・削除のコントロールが行われるようにしています。

jQuery

if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".header").addClass("headerColorScroll");
      $("#logo").addClass("headerColorScroll");
    } else {
      $(".header").removeClass("headerColorScroll");
      $("#logo").removeClass("headerColorScroll");
    }

CSS：keyframesのアニメーション

アニメーションは、top-in-basic と left-in-basic の2つを定義しています。

jQuery

@keyframes top-in-basic {
  0%{transform: translateY(-2000px)}
  100%{transform: translateY(0px)}
}
@keyframes left-in-basic {
  0%{transform: translateX(-2000px)}
  100%{transform: translateX(0px)}
}

どっちとも transform プロパティで、-2000px を動かして header では 0.4s。ロゴは 0.8s の時間を指定してアニメーションさせています。

かかかず

この辺りの数字を変えるとアニメーションが変えられるので、色々試してみてください。