Twenty Seventeen：スクロールしたらナビゲーションメニューに影をつけるカスタマイズ

WP公式テーマTwenty Seventeenでは、画面の幅が768ピクセル以上になると、スクロール時にナビゲーションメニューがトップに固定されます。

メニューが画面上部に固定されるのは、動的なデザインでかっこいいと思いますが、もう一工夫してより洗練された印象にしていきます。

具体的には、メニューが画面上部に固定されたら、メニューの下に影をつけて、コンテンツが「スルスル」っとメニューの下に入っていく感じの演出を追加します。

JavaScriptで動的に変化させる

このサイトをご覧になっているのなら、改めて説明は不要かもしれませんが、以下のスクリーンショットをご覧ください。

ちょっと解りにくいかもしれませんが、ナビゲーションメニューの下に影がついています。

ナビゲーションメニューがトップに固定されている時だけ影をつけたいので、リアルタイムでナビゲーションメニューの位置を計測します。

もちろんJavaScript（JQuery）を使用してのカスタマイズです。

/****************************************
    スクロール時にヘッダーに影をつける
*****************************************/

$(window).scroll(function(){

	// カスタムヘッダーの高さを取得
	var masthead_Height = $('#masthead').height();

	// ナビゲーションメニューのセレクタ（.navigation-top）を変数に格納
	var naviTop = $('.navigation-top');

	// ナビゲーションメニューの高さを取得
	var naviTop_Height = naviTop.height();

	// 影をつけるタイミングを調整
	var shadowPoints = ( masthead_Height - naviTop_Height);

		// 影をつける条件分岐
		if($(window).scrollTop() >= shadowPoints ){
				naviTop.css( "box-shadow", "0px 3px 3px 1px rgba(51,48,0,0.4)" );
		}
		else{	naviTop.css( "box-shadow", "none" );
		}
});

この短いJavaScriptコードだけでカスタマイズ完了です。

細かい説明は、コードの中にコメントとして書き込んでいるので、参考になさってください。

質問などあれば、コメント欄よりお気軽にどうぞ。