スクロールした際に表示非表示を2つの挙動で実装したい。

前提

スマホ用のメインナビについて、下記の要件で表示非表示をしたいのですが、どうしても複数の要件を満たせずにおります。

実装したい仕様

【仕様1】
１、初期状態では表示。
２、一定値(例として50px)下にスクロールしたら、非表示にしたい。
３、ブラウザの上まで戻ってきたら初期状態に戻る。

【仕様2】
１、仕様1の条件を満たした状態で現在値から上に50pxスクロールしたら表示させる
２、仕様1の条件を満たした状態で現在値から下に50pxスクロールしたら非表示させる。

現状

class付与をして表示非表示については、cssで制御している状況です。
要件1については実装した経験があり特に問題なかったのですが、要件2も並行して実装しようとするとどうしてもうまくいきません。
要件2についてはスクロールした瞬間にアクションするコードを掲載しております。(まずまず50pxスクロールしたらアクションさせる事ができておりません。)
優先したい要件としては要件2になります。
勉強不足な事は百も承知しておりますが、ご助力いただければ幸いです。

該当のソースコード

	<header>
		<div class="header_inner" id="header">
			<nav class="nav_02">
				<ul class="nav_02_inner">
						<li><a href="">リンク1</a></li>
						<li><a href="">リンク1</a></li>
						<li><a href="">リンク1</a></li>
						<li><a href="">リンク1</a></li>
				</ul>
			</nav>
		</div>
	</header>


<script>
	// 要件1のための記述
	// スクロールによってheaderの表示を切り替える
	$(window).scroll(function() {
		winScroll = 50;
		winScrollTop2 = $(this).scrollTop();
		if (winScrollTop2 > winScroll) {
			$('.nav_02').addClass('hide');
		}else {
			$('.nav_02').removeClass('hide');
		}
	});

	// 要件２のための記述
	// スクロールすると表示を切り替える
　　var startPos = -1, winScrollTop = 0;
	$(window).scroll(function() {
		winScrollTop = $(this).scrollTop();
		if (winScrollTop > startPos) {
			$('.nav_02').addClass('hide');
		} else {
			$('.nav_02').removeClass('hide');
		}
		startPos = winScrollTop;
	});
</script>


<style>
　　　nav.nav_02 {
		position: absolute;
		transition: all 0.5s ease;
	}
	nav.nav_02.hide{
		transition: all 0.5s ease;
		transform: translateY(-100%);
	}
</style>

Lhankor_Mhy

2022/04/09 00:50

補足願います。・「現在値」とはなんですか？　現在のスクロール位置という意味でしたら、「現在値」はいつ更新されますか？　たとえば、0pxから下に1pxスクロールした時の「現在値」は0pxですか？1pxですか？・「一定値(例として50px)下にスクロールしたら」とのことですが、これはページトップからという意味ですか？　そうだとすると仕様1と仕様2が矛盾する場合はどう解決しますか？・「仕様1の条件を満たした状態で」とは具体的にはどういう状態ですか？　仕様2よりも仕様1の条件を優先すると読めますが、それでいいでしょうか？

toriyoshi

2022/04/11 01:58 編集

コメントありがとうございます。・「現在値」とはなんですか？　現在のスクロール位置という意味でしたら、「現在値」はいつ更新されますか？　たとえば、0pxから下に1pxスクロールした時の「現在値」は0pxですか？1pxですか？ →現在値とはおっしゃる通り「現在のスクロール位置」で間違いございます。現在地はスクロールをした瞬間になりますので、0pxから1px移動したら現在値はスクロール前の位置から1pxということになります。・「一定値(例として50px)下にスクロールしたら」とのことですが、これはページトップからという意味ですか？　そうだとすると仕様1と仕様2が矛盾する場合はどう解決しますか？ →こちらはページトップという意味になります。この仕様1については記述したソースコードにより実装は出来ております。仕様が矛盾する場合については、仕様2のみの実装をゴールとして定めております。・「仕様1の条件を満たした状態で」とは具体的にはどういう状態ですか？　仕様2よりも仕様1の条件を優先すると読めますが、それでいいでしょうか？ →ページにアクセスした際に表示されているclass名「nav_02」がページトップから50px下にスクロールしたら非表示になり、再度ページトップにきたら表示される状態です。優先度の認識について語弊があり失礼いたしました。「現状」に要件と記述してしまいましたが、仕様2のことでございます。全体を通して仕様2の実装が優先度として高くなっております。

Lhankor_Mhy

2022/04/11 02:01

「現在地はスクロールをした瞬間」とのことですが、瞬間とはどの程度の間隔ですか？ 1s程度と考えていいですか？

toriyoshi

2022/04/11 02:02

秒数というよりも、「1px以上上下どちらかに移動したら」という認識でお願いいたします。

Lhankor_Mhy

2022/04/11 02:27

「1px以上上下どちらかに移動したら」とのことですが、たとえば10pxのスクロールは1pxのスクロールを10回繰り返したと解釈できないでもないです。（その場合、仕様2は全く動作しないはずです）おそらく、連続したスクロールは一体と考える、ということなのだと思いますが、その粒度と言いますか、どの程度の連続性でしたら一体と捉えるのかについてお聞きしています。

toriyoshi

2022/04/11 04:36

ご返信ありがとうございます。 ----- 「1px以上上下どちらかに移動したら」とのことですが、たとえば10pxのスクロールは1pxのスクロールを10回繰り返したと解釈できないでもないです。（その場合、仕様2は全く動作しないはずです） ----- こちらの内容ですと、現在地から50pxスクロールしたらというpxを指定して移動した事を認識させるのは不可能という事でしょうか？一体の捉え方についてですが、仕様にもある50pxを想定しております。

Lhankor_Mhy

2022/04/11 04:43

うーん、上手く伝わらないものですね……

行動規範の内容に同意します

回答2件

ベストアンサー

　補足依頼欄では隔靴掻痒の感がありましたので、とりあえず動くものを提示します。

https://jsfiddle.net/Lhankor_Mhy/a8vpxh6w/

　このコードでは「現在地」を最後のスクロールイベントから0.5秒で更新する仕組みにしています。これでなんとなく私が言いたかったことは伝わりましたでしょうか？

js
1		var startPos = -1, winScrollTop = 0, timer;
2		$(window).scroll(function () {
3			clearTimeout(timer);
4			winScroll = 50;
5			winScrollTop = $(this).scrollTop();
6			if (winScrollTop + winScroll > startPos) {
7			} else {
8				$('.nav_02').removeClass('hide');
9			}
10			timer = setTimeout(() => {
11				startPos = winScrollTop;
12			},
13				500
14			)
15		});

投稿2022/04/11 05:44

Lhankor_Mhy

総合スコア36115

toriyoshi

2022/04/12 03:53

ご回答ありがとうございます。頂いたコードにて検証しましたが、ほぼ理想の動きが実装できました！こちらでも色々と検証しましたが、もしかすると不可能な仕様もしくは記述を複雑にしないと実装できない可能性が高いのかなと言った状況です。言葉不足・認識の不足がありご不便おかけしましたが、ご助力頂き誠にありがとうございました。こちらをベストアンサーとさせて頂きます。

行動規範の内容に同意します