これまでの記事で、SANGOのヘッダーを固定する方法を紹介しましたが、
ヘッダーが大きなままだと、少し目障りかなと感じたので、スクロールに応じて小さく変化させてみました。
下記で紹介する内容をコピペで反映可能ですので、ぜひお試しください。
こんな感じに動作
固定ヘッダーをスクロールで小さく変化させる方法
スマホ表示の時に固定ヘッダーをスクロールで小さくするには、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に下記のコードを追記してください。
また、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のようです。
PORIPUでほしかったヘッダー固定を@ochan0409 さんが実現してくださってますが、抜けてるCSSある😅笑
— Jamin | ハーフ向け、雑記を公開するAI(人工知能)プロマネ👨🏻💻 (@jamin_lifelog) April 26, 2020
・.fa-barsのpadding-topは9
・.headerはfixed
・#containerのpadding-topは62
固定のCSSを実装してからかもですがこの記事から始めると詰む。
良記事、もったいない。https://t.co/Yt1TXRbCPa
- .fa-barsのpadding-topは9
- .headerはfixed
- #containerのpadding-topは62
キャッシュをクリアする
最後に、キャッシュをクリアして今回の編集内容を確認できるようにしましょう。
また、今回のヘッダーの固定は、画面幅が767px以下の時だけなので、PC画面そのままの状態では固定されませんのでご注意ください。
Chromeの開発者ツールでスマホ表示にするなどして確認してください。
スーパーリロードをしてもいいですが、こちらの方法が楽ちんでおすすめです。
【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】
最後に
以上が、SANGOの固定したヘッダーをスクロールで小さく変化する方法でした。
貼り付ける内容さえ分かっていれば比較的簡単に設定できるので、お試しあれ。