【WordPress自作テーマ】ヘッダーをスクロール時にふわっと表示させよう！#3

こんにちはもちです！

前回までの記事でトップページと、404ページ、個別ページが表示できるようになったわけですが、
まだまだ見た目が未完成なのでヘッダーから作っていきたいと思います。
そして今回はヘッダーをスクロール時にふわっと表示させる方法について話していきます。

現在のヘッダーに最低限の機能を追加する

今のヘッダーです、サイト名がなくトップページへのリンクもない状態です。
とりあえずですが、色とサイトトップページへのリンクを設置します
header.php

<header id="header">
	<a>Project-机上の空論</a>
</header>
<style>
header{
display:flex;
height:60px;
background:#1e1e1e;
width: 100%;
}
header a{
	font-size:2em;
	line-height:60px;
	color:#fff;
	text-decoration:none;
}
</style>

ヘッダーに色が付きました。

このヘッダーを今回はふわっと表示させて少し動きをつけていこうかと思います。

JavaScriptでスクロールに合わせてクラスを追加

今回は下にスクロールしたら見えなくなり、上にスクロールするとふわっとヘッダーが出現するようにします。
まずは必要なCSSからheader.phpで出力されるように記述していきます。header.php

<style>
<?/* 固定ヘッダー */?>
header{
display:flex;
height:60px;
background:#1e1e1e;
position: fixed;
width: 100%;
transition: .3s cubic-bezier(.4, 0, .2, 1);
z-index: 999
}
<?/* 固定ヘッダーのアニメーション */?>
.head-animation{
transform: translateY(-100%)
}
header b{
	font-size:2em;
	line-height:60px;
color:#fff;
 text-decoration:none;
}
</style>

headerは上部固定をするようにしました、
ヘッダーのクラスにheader-animationを追加すれば上に移動し、ヘッダーからheader-animationを取り除けばまた同じ位置に戻ります。
次に、header-animationをスクローに合わせてJavaScriptでクラスを追加したり削除したりできるようにします。
header.php

<script>
( function() {
  const target     = document.getElementById( 'header' ),
        height     = 64;
  let offset       = 0,
      lastPosition = 0,
      ticking      = false;
   
  function onScroll() {
    if( lastPosition > height ) {
      if( lastPosition > offset ) {
			 target.classList.add( 'head-animation' );
      } else {
        target.classList.remove( 'head-animation' );
      }
      offset = lastPosition;
    }
  }
   
  window.addEventListener( 'scroll', function(e) {
    lastPosition = window.scrollY;
     
    if( !ticking ) {
      window.requestAnimationFrame( function() {
        onScroll( lastPosition );
        ticking = false;
      });
      ticking = true;
    }
  });
})();
</script>

ヘッダーにheaderというidをつけそこからheaderを取得しています。
これで下にスクロールしたら見えなくなり、上にスクロールするとふわっとヘッダーが出てくるようになります。

WordPressだとログインしているユーザーは管理画面へアクセスするバー？が出ててるため、
ログインユーザーの場合はウィンドウ幅782px以上の場合32px、それ以下の場合は42px下にずらして固定しないと表示がずれます。

実際に使う際に気になる方はメディアクエリでtopのいちをログインユーザーの場合変える処理などを含んで使用してください！
検知するスクロールの値やアニメーションの値を変えることで色々カスタマイズできて便利なので是非試してみてください！

次回はトップページの記事一覧の見た目を作っていこうかと思います！
今回までの内容はテーマアーカイブの3.0に含まれます！