【WordPress / jQuery】スクロールすると狭くなる固定ナビ（Gナビ / ナビゲーションメニュー）【Gナビ改造系】

厚み（高さ）のあるナビゲーションが、スクロールすると薄く（高さが低く）なって、上部に固定されるパターン。

jQueryで、スクロール時に header-fix に対して「is-anime」というクラスを付与します。
これによって、CSSでスクロール時の装飾が可能となります。

もちろん、jQueryは、WordPressの「footer php」に。

HTML例

<header id="header-fix">

 

jQuery 

$(function() {
	$(window).on('load scroll', function() {
		var scrollPos = $(this).scrollTop();
		if ( scrollPos > 100 ) {
			$('header-fix').addClass('is-anime');
		} else {
			$('header-fix').removeClass('is-anime');
		}
	});
});