Lightningでスクロール後再表示・追従型ヘッダーを作る

Lightningでヘッダーを自作する

Lightningには豊富な標準ヘッダーが備わっていますが、「Lightning Block Template Parts」機能を使うことで、レイアウトを大きく変えた自作のヘッダーに変更することもできます（有償のVektor Passport利用が必要です）。

また、自作ヘッダー用テンプレートも「VK パターンライブラリ」に取りそろえられており、スクロールにそのまま追従するヘッダーも容易に作成できるのがありがたいところです。

ただ、標準ヘッダーのように「スクロールすると一度見えなくなるが、後から再表示されて追従してくるヘッダー」はVKパターンライブラリには（今のところ）ありません。

そこで、パターンライブラリのテンプレートをベースに、再表示・追従型ヘッダーを試作してみました。テンプレートのデザインそのままでよければ、思いのほかすぐできます。

テンプレートをLightning Block Template Partsに取り込む

まず、VKパターンライブラリの検索機能を使い、パターンカテゴリー「ヘッダー」で絞り込みを行います。

とりあえず試してみるなら、固定タイプの「ヘッダー_全幅_ナビと電話番号&お問い合わせボタン」を使用すると無難です。シンプルな構成ですが、PC・モバイル用の表示が画面サイズで制御され、一定のサイズ以下なら自動でハンバーガーメニューに推移してくれます。

「このパターンをコピーする」ボタンを押したら、WordPressダッシュボードの「Lightning Block Template Parts」で「投稿を追加」を選びます。区別しやすい題名をつけたら、先ほどのデータを本文エリアに貼り付けましょう。

ヘッダーを固定表示ブロック内に複製する

まず、コピー後のグループ（「ヘッダーアウター」等のグループ名がついていると思います）の後に「固定表示」ブロックを作成します。

次に、その固定表示ブロックの中に、コピーしてきたグループをもう一つ貼り付けてください。

その後、固定表示ブロックを以下の通りに設定します。

表示タイプ：スクロールしたら表示
固定位置：上
表示するタイミング：200px
タイマー設定（非表示にするまでの秒数）：0

これで公開・保存すれば、事前準備は完了です。

ヘッダーをBlock Template Partsに変更する

WordPressのカスタマイズ画面で、「Lightning ヘッダー設定」に進みます。

その後、「Block Template Parts」のリストから、先ほど作成したパーツを選んでください。

あとは「公開」ボタンを押して設定を保存すれば、

①初期状態ではヘッダーが上部に固定されており、
②スクロールすると見えなくなるが、
③少し下に画面を読み進めると再表示される

ヘッダーの完成です。

後から再表示される方のヘッダーアウターは、背景色の透明度を上げれば半透過型のメニューにすることもできます。

問題点は、この方法だと「上からすっとメニューが降りてくる」ヘッダーにはできない、ということです。

試してみていただけると分かりますが、メニューが再表示されるときにはフェードインしてきます。そこさえ妥協できるなら、悪くないカスタマイズではないでしょうか。

なぜか下に空白ができるときは

Lightning Block Template Partsをヘッダーに使うと、なぜかヘッダーの下に余計なスペースができることがあります。

この場合、使っているパーツの一番下に、空白の「段落」ブロックが入ってしまっている可能性が大です。油断するとすぐに差し込まれてくるのでご注意ください。見つけ次第、BackSpaceキー等で削除してしまいましょう。