XeoryExtensionのヘッダーメニューを固定にする方法!

XeoryExtensionのスマホメニューを右上にするカスタマイズ。の記事で、ヘッダーメニューを固定(追尾式)にする方法について教えて欲しいというコメントがありました。

カスタマイズ自体は難しくないのですが、どこに何のコードを追加すればいいのか、他にも気になっている方がいると思うので、そのカスタマイズ方法についてご紹介します。

(コードを見たところ、XeoryBaseでも同じようなカスタマイズが試せそうです)

CAUTION

バックアップを取ってからお試しください!

スタイルシートにコピペでOK!固定ヘッダーにする方法!

まず、単純にヘッダーを固定にする方法ですが、下記のコードをスタイルシート(style.css)にコピペするだけです。子テーマのスタイルシートでもOKです。

#header {
 position: fixed;
 left: 0;
 right: 0;
 z-index: 999;
}
#main_visual,
.breadcrumb-area {
 padding-top: 92px;
}
POINT

スマホメニューがデフォルトの状態(タイトルやロゴの下にある状態)であれば、padding-topの値を適宜変更してください:D

POINT2

ヘッダーを固定にすると、その下の要素がヘッダーの高さ分、上にズレるので、ヘッダーに隠れてしまわないようにpadding-topで余白を作ればOKです。

上記のコードでは、メインビジュアル(トップページの場合)とパンくずリスト(その他の記事の場合)の上に余白を作ることで対応しています。

スマホ表示時のみ、固定ヘッダーにする

上記の方法だと、パソコンで表示する時も固定ヘッダーになりますが、スマホ表示時だけ固定ヘッダーにする方法もあります。

下記のコード(おそらく、146行目)を探し、

@media screen and (max-width: 767px) {
 /* phone */
 .wrap,
 .one-column #content .wrap {
 margin-left: 12px;
 margin-right: 12px;
 }

 /* phone end */
}

この下に先ほどのコードをコピペするだけです。追加後はこのようになります。

@media screen and (max-width: 767px) {
 /* phone */
.wrap,
.one-column #content .wrap {
 margin-left: 12px;
 margin-right: 12px;
}
#header {
 position: fixed;
 left: 0;
 right: 0;
 z-index: 999;
}
#main_visual,
.breadcrumb-area {
 padding-top: 92px;
}

 /* phone end */
}

スクロール量に合わせてヘッダーを表示させる方法

また、「最初はヘッダーを非表示にして、後から表示させる方法」についても合わせてご紹介します。

lib→jsの中に、「jquery.pagetop.js」というファイルがあるので、そこに下記のコードを追加します。

/*--------------------------------
 ヘッダー表示・非表示切り替え
--------------------------------*/
$(function() {
 var header = $('header');
 header.hide();
 $(window).scroll(function() {
 if ($(window).scrollTop() > header.height()) {
 header.show();
 } else {
 header.hide();
 }
 });
});

追加後は、このようになります。

;(function ( $, window, document, undefined ) {

$(function(){
 $(window).bind('scroll', function(){
 if( $(this).scrollTop() > 150 ){
 $('.pagetop').fadeIn('fadeIn');
 } else {
 $('.pagetop').fadeOut();
 }
 });
 $('a[href^="#"]').click(function(){
 var speed = 500;
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

/*--------------------------------
 ヘッダー表示・非表示切り替え
--------------------------------*/
$(function() {
 var header = $('header');
 header.hide();
 $(window).scroll(function() {
 if ($(window).scrollTop() > header.height()) {
 header.show();
 } else {
 header.hide();
 }
 });
});

})(jQuery, window, document);

本来は、〇〇.jsというファイルを作って読み込むのですが、面倒だと思うので、今回のように既存のファイルに追加してください。

まとめ

以上、XeoryExtensionのヘッダーメニューを固定にする方法でした。デザインなどは、適宜微調整していただければと思います。

ご参考までに!(`・ω・´)ゞ

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!