上スクロールでナビが表示（下スクロール時は非表示）。トップから指定位置で非表示

前提・実現したい動作

※前提
上部グローバルナビは別デザインの為、グローバルナビとフローティング用のナビが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="#">メニュー１</a></li>
<li><a href="#">メニュー２</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件

ベストアンサー

ご希望のことは、
下スクロールかつ scrollTop が 300px以上のとき非表示、
上スクロールの場合は表示するということですか。

現状は下スクロールですぐ消えて、上スクロールですぐ表示される状態でしょうか。

上記の解釈であっているとするなら、たぶん下記でいいかと。
(HTML、CSSが提示されていないので確認はとれてません。うまくいかない場合は、考え方を参考にして修正してください。)

js
1sc_func();
2    function sc_func(){
3
4        var posBf = $(window).scrollTop();
5
6        $(window).scroll(function(){
7            var posAf = $(this).scrollTop();
8
9            if( posAf < posBf){
10                $('.fixed_nav').removeClass('js_hide');
11                $('.fixed_nav').addClass('js_hide2');
12            }else{
13                if(posAf >= 300){
14                    $('.fixed_nav').addClass('js_hide');
15                    $('.fixed_nav').removeClass('js_hide2');
16                }
17            }
18            posBf = posAf;
19        });
20    }

下スクロールの場合の非表示、上スクロールの場合は表示。
トップ0から300pxの位置では常に非表示。

いいえると、

トップ0から300px または下スクロールの時、非表示。
それ以外は表示。

ですので、それを条件にすればいいでしょう。

js
1sc_func();
2function sc_func() {
3
4    var posBf = $(window).scrollTop();
5
6    $(window).scroll(function () {
7        var posAf = $(this).scrollTop();
8
9        if (posAf > posBf || posAf < 300 ) {
10            $('.fixed_nav').addClass('js_hide');
11            $('.fixed_nav').removeClass('js_hide2');
12        } else {
13            $('.fixed_nav').removeClass('js_hide');
14            $('.fixed_nav').addClass('js_hide2');
15        }
16        posBf = posAf;
17    });
18}

投稿2020/08/12 05:53

編集2020/08/12 07:18

hatena19

総合スコア33715

kapparappa

2020/08/12 06:11

ご回答ありがとうございます！ HTML, CSS追記させていただきました。 ------- 下スクロールの場合の非表示、上スクロールの場合は表示。トップ0から300pxの位置では非表示。上記のような状態にしたいと思っております。教えていただいたコードだと0から300pxの位置では非表示の状態にはできないようでした。