現在サイドメニューがあるWebページを作成しております。
たとえば、ページ内のAboutが表示されている間は、メニューのAbout部分(文字とその上のバー)の色を濃く変えたいと思っています。
以下のコードで実装はできたのですが、色が濃く変わると文字だけが少し上にズレてしまいます。
大きな問題はないのですが、原因を知りたいと思い、こちらに投稿いたしました。
HTML
<div id="menublock1"> <a href="#about"> <!--開いているときに色変更--> <img class="menubar" src="img/003bar.png" alt="メニューバー" border="0"> <img class="current" src="img/003bar_change.png" alt="メニューバー" border="0"> <h2 class="sidemenu">About</h2></a> </div>
CSS
#menublock1 { width: 18%; position: fixed; top: 15vw; left: 3vw; } .menubar { width: 56.8%; } .current{ display: none; } .current.vivid { width: 56.8%; } a { text-decoration: none; } .sidemenu { font-family: 'Fugaz One', cursive; font-weight: 400; color: #ff9bcdff; font-size: 2.5vw; letter-spacing: 0.03em; transform: rotate(-10deg); line-height: 60%; text-indent: 0.3em; } .sidemenu.vivid { color: #ff007fff; }
jQuery
$(function(){ $(window).on('scroll',function(){ $('#menublock1 .current, #menublock1 .sidemenu').each(function() { let now = $(window).scrollTop(); let posTop = $('#about').offset().top; let posBottom = $('#about').offset().top + $('#about').outerHeight(); if(posTop < now && now <= posBottom) { $(this).addClass('vivid'); $('#menublock1 .current').show(); $('#menublock1 .menubar').hide(); } else { $(this).removeClass('vivid'); $('#menublock1 .current').hide(); $('#menublock1 .menubar').show(); } }); }); });
003bar.pngと003bar_change.pngの画像サイズは全く同じです。
試したこと
・CSS内.sidemenu.vividに.sidemenuと同様(文字色コード以外)の記述をする
→上記コードの挙動と変わりませんでした
確認に使用しているブラウザはMicrosoft Edgeです。
原因をご存知でしたらお教えいただけますと幸いです。
まだ回答がついていません
会員登録して回答してみよう