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コードだけでカスタマイズ完了です。
細かい説明は、コードの中にコメントとして書き込んでいるので、参考になさってください。
質問などあれば、コメント欄よりお気軽にどうぞ。