position:Sticky;を設定している要素をjQueryの.slideUp()/.slideDown()で操作すると、Sticky状態の場合に限り要素が表示/非表示を繰り返す

Question

独学の為、認識がおかしい点やすごく説明が的を得ていないところもあると思いますが何卒ご容赦していただけますと幸いです・・・。

発生している問題・エラーメッセージ

positionプロパティにStickyを設定してる要素に対して、
jQueryの.slideUp()/.slideDown()を利用して上下スクロール操作時に表示/非表示とするよう実装したのですが、
該当要素がSticky状態（上部に固定）の時にスクロール操作を素早く行うと、
要素が表示/非表示を永続的に繰り返してしまいます。

該当のソースコード

<div class="navigation">
    <h3><a href="#">test</a></h3>
    <nav>
      <ul>
        <li class="nav_menu"><a href="#">menu1</a></li>
        <li class="nav_menu"><a href="#">menu2</a></li>
        <li class="nav_menu"><a href="#">menu3</a></li>
        <li class="nav_menu"><a href="#">menu4</a></li>
        <li class="nav_menu"><a href="#">menu5</a></li>
        <li class="nav_menu"><a href="#">menu6</a></li>
      </ul>
    </nav>
  </div>

.navigation {
  height: 120px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

$(function() {
  var pos = 0;
  var nav = $('.navigation');
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > pos) {
      //下にスクロールしたらナビメニューをスライド表示
      nav.slideDown();
    } else {
　　　//上にスクロールしたらナビメニューを非表示
      nav.slideUp();
    }
    pos = $(this).scrollTop();
  });
});

試したこと

要素が表示/非表示のループに陥った際は、ページリロード、
若しくは該当要素より高い位置までスクロールするとループが停止することを確認しています。

またCSSで.nav_menuのpositionプロパティからStickyを外す、
若しくはSticky状態じゃない(上部に固定されていない)状態でスクロール操作を行った場合では、
該当の現象が起きない事を確認しています。

上記の事から、Stickyの動作とslideUp()/slideDown()の動作が干渉しあい起きている事は理解できたのですが、
自身では明確な解決方法が見いだせず質問させていただきます。

###補足
jQuery : 3.4.1
確認ブラウザ：Chrome 77.0.3865.120 / Firefox Quantum 69.0.3

同じソースコードでも、
Microsoft Edge 44.18362.387.0で確認した場合に限り、
表示/非表示を繰り返す挙動が発生しませんでした。

Answer 1

自己解決したかもしれません。

.slideUp()/.slideDown()の動作原理の認識が誤っていたようで、
@marumoe様の記事を参考に回避策を講じたところ、
とりあえず現象が発生しなくなりました。

該当メソッドの動作原理については、
@marumoe様がまとめていらっしゃいました下記記事が
とてもわかりやすかったです。

@marumoe様
[jQuery] アニメーションさせるメソッド

slideDown / slideUp

要素をスライドダウン／アップ アニメーションさせるメソッド。
要素のoverflowプロパティをhiddenの値に変更し、
入り切らない要素はカットする状態にする。
この際にpaddingプロパティの値は0にしている。
その上でheightプロパティの値を徐々に増減させてスライドダウン／アップを表現している。

そして最終的にdisplayプロパティの値を block / none に変更する事で、
スライドでの要素の表示／非表示を再現している。

引用テキスト@marumoe様の上記リンクから参照

原因（と思われる点）

引用させていただきました内容の7行目、
【heightプロパティの値を徐々に増減させてスライドダウン／アップを表現】という点に今回の原因がありました。

該当の動作原理ですと、私の場合、body直下の要素に対してslideUp()を適用していた為、
slideUp()が動作した際に、適用要素がページ上から完全から非表示となり、
該当要素の下部コンテンツが上詰めされる事によって、
$(window).scrollTop() で取得しているheight値が減少してしまっておりました。

これに加えて、CSSからpositionプロパティstickyを設定している要素の為、
該当メソッドによる表示/非表示時に、Sticky側のposition:relative/fixed切り替え動作と、
該当メソッド動作完了時のdisplay:block/noneの切り替え動作が衝突し、
適切に処理が行えない状態で以下のループに陥ったのだと思われます。
（が、まだまだ学び途中の為、これが絶対的な原因であるか断定できません・・・。
もしも原因がわかる方がいらっしゃれば回答、お願いします・・・。）

---

1.slideDown()の処理が行われると同時に、
slideUp()側のdisplayプロパティnoneの処理が走る

2.slideDown()の動作が完了する前に、
slideUp()の処理によって$(window)のheight値(.scrollTop())が減少し、
上詰めによる上スクロールが発生

3.上詰めによる上スクロールに伴って、slideUp()の処理が走ると同時に、
slideDown()のdisplayプロパティblockの処理が走る

4.slideUp()の処理が完了する前に、slideDown()の処理によってheight値が増加し、
それに伴って下スクロールが発生

5.以後、1.からループ。

---

回避策

Stickyを設定していた要素【<div class="navigation">】に対して、
同じheight値（120px）を持つ親要素【div class="nav_parent"】を追加し、親要素側にstickyを設定することで、slideUp/slideDown動作時のウィンドウ全体のheight値が変動する挙動を抑えることができ、
結果として、ナビメニューの表示/非表示を繰り返す挙動を回避する事が出来ました。

認識を改めた事で、回避策を思いつくに至りましたが、
おおもとの原因については、明確に断言できるものでなく、
もしも私の考えが誤っていたらご教示いただきたいです・・・。

勉強中の身の為、すごく説明しにくくわかりにくいかもしれないですが、
よろしくお願いします。