お問い合わせはコチラから

WordPressのヘッダーメニューを固定化!でも上スクロールでは消える有能なカスタマイズ

サイト運営

海外テーマや有料テーマでは、グローバルメニューが画面TOPに到達すると固定化されたり、一度消えたグローバルメニューが上スクロールすると上からすっと降りてきて表示されるギミックをよく見かけます。

このサイトで使用しているテーマは無料テーマのCocoonです。Cocoonのグローバルメニューはスクロールするとそのまま消えていきます。ちょっと物足りない感じがしていました。

Cocoonでもグローバルメニューのギミックを実現することはできます(当たり前ですが)。

この記事では、Cocoonのグローバルメニューを画面TOPで固定化しつつ、下スクロールで非表示、上スクロールで表示するカスタマイズについてご紹介します。

jQuery

Cocoon子テーマであれば、javascript.jsとかに貼り付けます。

WordPressなので、$はjQueryに置き換えた方が良いでしょう。

javascriptにメディアクエリつけないとスマホの時に変なスペースが出てがたつきます。

//グローバルメニューを下スクロール時に画面TOPに固定化する
$(function() {
var $win = $(window),
$main = $('main'),
$nav = $('nav'),
navHeight = $nav.outerHeight(),
navPos = $nav.offset().top,
fixedClass = 'is-fixed';

$win.on('load scroll', function() {
var value = $(this).scrollTop();
if ( value > navPos ) {
$nav.addClass(fixedClass);
$main.css('margin-top', navHeight);
} else {
$nav.removeClass(fixedClass);
$main.css('margin-top', '0');
}
});
});
//グローバルメニューを下スクロール時に消す、上スクロール時に表示させる
$(function() {
var startPos = 0;
var $nav = $('nav'),
navPos = $nav.offset().top;
$(window).on('scroll',function(){
var value = $(this).scrollTop();
if ( value >= startPos ) {
if( value >= navPos + 50 ){
$('nav').addClass('hide');
}
} else {
$('nav').removeClass('hide');
}
startPos = value;
});
});

CSS

media queryは必要応じて自分でつけてください。


#header-container .navi.is-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-transition: all .4s ease 0s,background .6s ease .2s;
transition: all .4s ease 0s,background .6s ease .2s;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;

}
#header-container .navi.hide{
transform: translateY(-100%);
}

まとめ

Cocoonは超多機能ですが、PCメニューの固定化などはオプションにはないので、今回ご紹介した方法を取り入れるとCocoonを使った他のサイトと差別化できるのではないかと思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
目次
タイトルとURLをコピーしました