アクアリウムのおすすめグッズはこちら!

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

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

TAGS:

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

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

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

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

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

こんな感じに動作

固定ヘッダーのGIF

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

固定ヘッダーをスクロールで小さくするには、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の自動バックアップ」をお読みください。
コード
/*********************
* 固定ヘッダーを小さくする
*********************/
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');

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

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

キャッシュをクリアする

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

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

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

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

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

最後に

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です