前提・実現したい動作
※前提
上部グローバルナビは別デザインの為、グローバルナビとフローティング用のナビが2つ存在している状態。
グローバルナビは固定。
⑴上スクロールでフローティングナビが表示(下スクロール時は非表示)
⑵トップから300px位置でフローティングナビを非表示にする。
現在⑴は下記のコードで動作しているんですが、
ここに⑵の動作を追加する場合、どのような記述にしたらいいでしょうか?
現在のソースコード
sc_func(); function sc_func(){ var posBf = $(window).scrollTop(); $(window).scroll(function(){ var posAf = $(this).scrollTop(); if( posAf < posBf){ $('.fixed_nav').removeClass('js_hide'); $('.fixed_nav').addClass('js_hide2'); }else{ $('.fixed_nav').addClass('js_hide'); $('.fixed_nav').removeClass('js_hide2'); } posBf = posAf; }); }
HTML
<div class="fixed_nav"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a> </ul> </div>
CSS
.fixed_nav { position: fixed !important; width: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 999; top:0px; } .fixed_nav.js_hide { transform: translateY(-100%); } .fixed_nav.js_hide2 { transform: translateY(0); }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/12 06:11
2020/08/12 06:43
2020/08/12 08:45 編集
2020/08/12 09:44
2020/08/12 10:27