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

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

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

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

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

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

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

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

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

下記のコード（おそらく、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のヘッダーメニューを固定にする方法でした。デザインなどは、適宜微調整していただければと思います。

ご参考までに！(｀･ω･´)ゞ