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