上にスクロールすると出てきて下にスクロールすると非表示になるメニュー

上や下にメニューを固定するとユーザに効果的にメニューを見せることができるが、ずっと上や下に固定でメニューにあると表示エリアが少なくなるため、上にスクロールするとメニューが表示され、下にスクロールすると非表示になるメニューを実装するには以下の通り。

実装するにはJqueryを使用するため、先にJqueryを読み込んでおく

<script
 src="https://code.jquery.com/jquery-3.6.0.min.js"
 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
 crossorigin="anonymous">
</script>

メニューの部分のCSSは以下の通り。最初は非表示にするためtop:-100pxで表示エリア外においておく。transitionは1sに設定して1秒でアニメーションするようにしている。あとはJqueryで「ds_nav」の要素に「isActive」を付加してtop:0pxでエリア内に表示するようにしている

#ds_nav {
 width: 100%;
 text-align: center;
 background-color: #000;
 font-size: 0;
 margin: 0px auto 0px auto;
 z-index: 200;
 opacity:0.85;
 color:#fff;
 left: 0;
 right: 0;
 top:-100px;
 position: fixed;
 transition: 1s;
}
#ds_nav.isActive {
 top:0px;
}

メニュー部分のHTMLは以下の通り。とりあえず外側だけ

<nav id="ds_nav">
・・・メニューの中身を書く
</nav>

スクロールして表示・非表示させるJqueryコードは以下の通り。下のコードはTOPから300px離れている状態で、上にスクロールするとメニューが上から出てくる（classのisActiveを付与する）。下にスクロールすると、メニューが上に引っ込む（classのisActiveを削除する）

常にスクロールのPositionをposという変数に入れ込んでいる

<script>
 $(function(){
  var pos = 0;
  var header = $('#ds_nav');

  $(window).on('scroll', function(){
   if($(this).scrollTop() > 300){
    if($(this).scrollTop() < pos ){
     //上にスクロールしたとき
     header.addClass('isActive');
    }else{
    //下にスクロールしたとき
     header.removeClass('isActive');
    }
   }else{
    header.removeClass('isActive');
   }
   pos = $(this).scrollTop();
  });
 });
</script>