[小松]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】11.7.6
【お使いのブラウザ】Google Chrome

グローバルメニューの動きを以下のサイトのようにしたいのですが可能でしょうか？

具体的に言うと、下にスクロールしたらグローバルメニューが隠れ、上にスクロールするとまたグローバルメニューが出てくるようにしたいと思っております。

Google – 概要

Google の使命は、世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすることです。このサイトでは、Google の沿革やプロダクトなどをご紹介します。

ご教授いただければ幸いです。

よろしくお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

Snow Monkey のドロップナビ（スクロールしたらでてくるナビゲーション）は、すでに js で制御されているので、さらに js で制御しようとすると干渉する可能性があります。という前置きをした上で、一応コードを書いてみました。いまは動いたとしてもアップデートしたら干渉下、というのもあり得るかもなのでご注意ください。

wp_footer アクションフックで直接 script を追加していますが、本来はちゃんと js ファイルをつくってそこにコードを書いたほうが良いです。また、多分このコードは IE では動かないので（もしかしたら Edge も）、動かしたい場合はトランスパイルが必要です。あくまで参考ということで見て頂ければと思います。

add_action(
	'wp_footer',
	function() {
		?>
<script>
document.addEventListener(
	'DOMContentLoaded',
	() => {
		const dropNav = document.querySelector('.l-header__drop-nav');
		if (! dropNav) {
			return;
		}

		let scrollTop = window.pageYOffset;

		const apply = () => {
			const newScrollTop = window.pageYOffset;
			if (scrollTop > newScrollTop) {
				// 下方向
				dropNav.setAttribute('aria-hidden', 'false');
			} else if (scrollTop < newScrollTop) {
				// 上方向
				dropNav.setAttribute('aria-hidden', 'true');
			}
			scrollTop = newScrollTop;
		};

		window.addEventListener(
			'hideDropNav',
			() => {
				// ドロップナビのデフォルトの非表示処理後
				window.removeEventListener('scroll', apply, false);
			}
		);

		window.addEventListener(
			'showDropNav',
			() => {
				// ドロップナビのデフォルトの表示処理後
				window.addEventListener('scroll', apply, false);
			}
		);
	},
	false
);
</script>
		<?php
	}
);

♥ 0

いいねをした人: 居ません

[小松]

早々にご対応いただきありがとうございます！

希望していた動きを実装することができました！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

良かったです！
前述したようにアップデート（主にメジャーアップデート）のときは要確認なのでご注意ください！
トピック閉じますね。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿