投稿者: 058-2017

Twenty Seventeenでは、PCのレイアウトだと、下にスクロールすると、画面上部にナビゲーションが固定されるようになっています。

↓ 下にスクロールすると画面上部に貼り付く。

スマホのナビゲーションは、下にスクロールすると上に流れて行ってしまい、固定されません。

スマホのナビゲーションも固定する方法です。

手順

追加CSSに以下を追加

.site-navigation-fixed.navigation-top {
	bottom: auto;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 7;
}

JavaScriptを修正

・本体を書き換える場合

以下のファイルを編集する。

wp-content/themes/twentyseventeen/assets/js/global.js

adjustScrollClass関数を以下のように編集する（赤文字部分を追加）。

	// Make navigation 'stick'.
	function adjustScrollClass() {

		// Make sure we're not on a mobile screen.
		if ( 'none' === $menuToggle.css( 'display' ) ) {

			// Make sure the nav isn't taller than two rows.
			if ( navIsNotTooTall ) {

				// When there's a custom header image or video, the header offset includes the height of the navigation.
				if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
					headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
				} else {
					headerOffset = $customHeader.innerHeight();
				}

				// If the scroll is more than the custom header, set the fixed class.
				if ( $( window ).scrollTop() >= headerOffset ) {
					$navigation.addClass( navigationFixedClass );
				} else {
					$navigation.removeClass( navigationFixedClass );
				}

			} else {

				// Remove 'fixed' class if nav is taller than two rows.
				$navigation.removeClass( navigationFixedClass );
			}
		} else {
			headerOffset = $customHeader.innerHeight();
			if ( $( window ).scrollTop() >= headerOffset ) {
				$navigation.addClass( navigationFixedClass );
			} else {
				$navigation.removeClass( navigationFixedClass );
			}
		}
	}

・子テーマの場合

本体を直接編集すると手っ取り早いのですが、テーマのアップデートで修正が上書きされて、元に戻ることがあります。アップデートにも対応するには、子テーマで処理を上書きするのがよいです。

子テーマを作って、親テーマ（TwentySeventeen）から子テーマに assets/js/global.js をコピーして、子テーマ側で、上のように必要個所を編集します。

解説

PCの画面幅のときナビゲーションが固定されるのは、以下のCSSが効いているため。

@media screen and (min-width: 48em) { /* ← 画面が広いときに適用 */
	/* 略 */

	.site-navigation-fixed.navigation-top {
		bottom: auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 7;
	}

	/* 略 */
}

メディアクエリなしで追加CSSに書くことで、どの画面の幅でも適用されるようになります。

.site-navigation-fixed というクラスは、JavaScriptによって付与されています。

ヘッダ部分が隠れるまで画面を下にスクロールしたときにCSSのクラス（.site-navigation-fixed）が追加され、上にスクロールすると削除されます。

この処理がスマホの画面幅のときは除外されていて、PCの画面幅のときしか実行されないので、スマホの場合も処理をするようにしました。また、ヘッダやメニューの高さの計算がPC用になっているので、その部分も調整しています。