独学の為、認識がおかしい点やすごく説明が的を得ていないところもあると思いますが何卒ご容赦していただけますと幸いです・・・。
発生している問題・エラーメッセージ
positionプロパティにStickyを設定してる要素に対して、
jQueryの.slideUp()/.slideDown()を利用して上下スクロール操作時に表示/非表示とするよう実装したのですが、
該当要素がSticky状態(上部に固定)の時にスクロール操作を素早く行うと、
要素が表示/非表示を永続的に繰り返してしまいます。
該当のソースコード
html
1<div class="navigation"> 2 <h3><a href="#">test</a></h3> 3 <nav> 4 <ul> 5 <li class="nav_menu"><a href="#">menu1</a></li> 6 <li class="nav_menu"><a href="#">menu2</a></li> 7 <li class="nav_menu"><a href="#">menu3</a></li> 8 <li class="nav_menu"><a href="#">menu4</a></li> 9 <li class="nav_menu"><a href="#">menu5</a></li> 10 <li class="nav_menu"><a href="#">menu6</a></li> 11 </ul> 12 </nav> 13 </div>
css
1.navigation { 2 height: 120px; 3 position: sticky; 4 top: 0; 5 z-index: 1000; 6}
jQuery
1$(function() { 2 var pos = 0; 3 var nav = $('.navigation'); 4 $(window).on('scroll', function() { 5 if ($(this).scrollTop() > pos) { 6 //下にスクロールしたらナビメニューをスライド表示 7 nav.slideDown(); 8 } else { 9 //上にスクロールしたらナビメニューを非表示 10 nav.slideUp(); 11 } 12 pos = $(this).scrollTop(); 13 }); 14});
試したこと
要素が表示/非表示のループに陥った際は、ページリロード、
若しくは該当要素より高い位置までスクロールするとループが停止することを確認しています。
また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で確認した場合に限り、
表示/非表示を繰り返す挙動が発生しませんでした。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。