【SANGO】固定ヘッダーをスクロールで小さく変化させる方法

SANGOの固定ヘッダーを小さく

TAGS:

これまでの記事で、SANGOのヘッダーを固定する方法を紹介しましたが、

SANGOのヘッダーを固定する方法 【スマホ対応】SANGOのヘッダーをCSSで固定する方法

ヘッダーが大きなままだと、少し目障りかなと感じたので、スクロールに応じて小さく変化させてみました。

下記で紹介する内容をコピペで反映可能ですので、ぜひお試しください。

注意
カスタマイズは、自己責任でお願いします。

こんな感じに動作

固定ヘッダーのGIF

MEMO
SANGOのバージョンがv2.0.6以降の場合の内容を追記しました。アップデートしたら動かなくなったという方は貼り替えてください。

固定ヘッダーをスクロールで小さく変化させる方法

スマホ表示の時に固定ヘッダーをスクロールで小さくするには、CSSの追記とjQueryの追記が必要です。

まずは、貼り付けてから微調整してもらうのが良いと思います。

また、内容はヘッダーを固定する記事を実施した後という前提で書いています。

style.cssに追記しよう

まずは、下記のCSSを子テーマのstyle.cssに追記しましょう。

CSSでは、スクロールで変更するヘッダーのサイズ等を設定しています。

コード
/*--------------------------------------
  スクロールでヘッダーを小さくする
--------------------------------------*/
@media only screen and (max-width: 767px){
	.is-animation #drawer__open, 
	.is-animation .header-search {
		font-size: .8em;
		height: 40px;
		line-height: 40px;
	}
	.is-animation #drawer+#inner-header {
		height: 40px;
	}
	.is-animation #logo:before {
		height: 0;
	}
	.is-animation #logo a {
		padding: 0!important;
		transition: none;
	}
	.is-animation #logo {
		height: 40px;
		line-height: 1.5;
		font-size: initial;
	}
	.is-animation #logo img {
		height: 30px;
		padding: 0;
	}
	.is-animation .mobile-nav {
		display: none;
	}
}

ヘッダーメニューを非表示に

ヘッダーを小さくすると同時に、ヘッダー下にあるスマホメニューを非表示にしています。

残しておきたい場合は、.is-animation .mobile-navのdisplay: none;を削除し、各クラスの高さを微調整してください。

結構な幅を取ってしまうので、非表示にしておくのがおすすめです。

functions.phpに追記しよう

続いて、functions.phpに下記のコードを追記してください。

注意
functions.phpの編集はとても危険な作業です。しっかりバックアップをとってから編集することをおすすめします。バックアップをとるなら「BackWPupのインストールと設定|WordPressの自動バックアップ」をお読みください。

また、WordPress5.5以降でjQueryの読み込み様式が変わったので、それぞれの場合のコードを載せておきます。

SANGO v2.0.6以前の場合

コード
/*********************
 * 固定ヘッダーを小さくする
*********************/
function header_scroll_mini() {
?>
<script>
jQuery(function() {
	var w = $(window).width();
    var x = 767;
    if (w <= x) {
		  var $win = $(window),
			  $header = $('header'),
			  animationClass = 'is-animation';
		
		$win.on('load scroll', function() {
			var value = $(this).scrollTop();
			if ( value > 100 ) {
				$header.addClass(animationClass);
			} else {
				$header.removeClass(animationClass);
			}
		});
	}
});
</script>
<?php
}
add_action('wp_footer', 'header_scroll_mini');

SANGO v2.0.6以降の場合

WordPressのバージョンとSANGOのバージョンが最新だという方はこちらになります。

コード
/*********************
 * 固定ヘッダーを小さくする
*********************/
function header_scroll_mini() {
?>
<script>
jQuery(function($) {
	var w = $(window).width();
    var x = 767;
    if (w <= x) {
		  var $win = $(window),
			  $header = $('header'),
			  animationClass = 'is-animation';
		
		$win.on('load scroll', function() {
			var value = $(this).scrollTop();
			if ( value > 100 ) {
				$header.addClass(animationClass);
			} else {
				$header.removeClass(animationClass);
			}
		});
	}
});
</script>
<?php
}
add_action('wp_footer', 'header_scroll_mini');

ヘッダーが小さくなる場所

どれくらいスクロールするとヘッダーが小さくなるかは、赤文字部分を変更してください。

PORIPUの場合

今回は、当サイトの、「ヘッダーを固定するカスタマイズ」を実施したという想定での内容となっていますが、

PORIPUを導入していて、既に固定ヘッダーができている場合には、ツイッターでご指摘いただいたように、CSSを追記すればOKのようです。

  • .fa-barsのpadding-topは9
  • .headerはfixed
  • #containerのpadding-topは62

僕はPORIPUを入れてないから分からないけど…。

キャッシュをクリアする

最後に、キャッシュをクリアして今回の編集内容を確認できるようにしましょう。

また、今回のヘッダーの固定は、画面幅が767px以下の時だけなので、PC画面そのままの状態では固定されませんのでご注意ください。

Chromeの開発者ツールでスマホ表示にするなどして確認してください。

スーパーリロードをしてもいいですが、こちらの方法が楽ちんでおすすめです。

CSSのバージョン管理 【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】

最後に

以上が、SANGOの固定したヘッダーをスクロールで小さく変化する方法でした。

貼り付ける内容さえ分かっていれば比較的簡単に設定できるので、お試しあれ。

コメントを残す