実現したいこと
ここに実現したいことを箇条書きで書いてください。
・ハンバーガーメニューを100pxほどスクロールしてから開いて、閉じる際に×の色が見えにくいため変更したいです。
前提
web制作の学習教材でポートフォリオにも利用する予定です。
上部にあるヘッダーとは別に、
スクロールしたら違う背景色のヘッダーが画面上部から降りてきて固定するようにしております。
ハンバーガーメニューもスクロールされたら色が変わるようにしており、
ここが関係してるかと思われます。
どなたかお力添えいただけますと幸いです。
発生している問題・エラーメッセージ
100pxスクロールしてから、ハンバーガーメニューを開いた時の×の色の変更ができないです。
該当のソースコード
HTML
1<header class="header__main-page" data-aos="fade-up"> 2 <div class="header-inner inner"> 3 <h1 class="header__main-logo"><a href="./index.html"><img src=""></a></h1> 4 <ul class="header-nav"> 5 <li><a href="room.html">ナビ1</a></li> 6 <li><a href="food.html">ナビ2</a></li> 7 <li><a href="spa.html">ナビ3</a></li> 8 </ul> 9 </div> 10</header> 11 12<!-- スクロールすると上から出現するヘッダー --> 13 <header class="header__main-page-fixed"> 14 <div class="header-inner inner"> 15 <h1 class="header__lower-logo"><a href="./index.html"><img class="header__lower-logo-img" src="" alt=""></a></h1> 16 <ul class="header-nav"> 17 <li><a href="room.html">ナビ1</a></li> 18 <li><a href="food.html">ナビ2</a></li> 19 <li><a href="spa.html">ナビ3</a></li> 20 </ul> 21 </div> 22</header> 23 24<!-- ハンバーガーメニュー --> 25 <div class="drawer-icon"> 26 <div class="drawer-icon-bars"> 27 <div class="drawer-icon-bar1 top-drawer"></div> 28 <div class="drawer-icon-bar2 top-drawer"></div> 29 <div class="drawer-icon-bar3 top-drawer"></div> 30 </div> 31 </div> 32 <div id="#drawer" class="drawer-content"> 33 <ul class="drawer-content-items"> 34 <li class="drawer-content-item"><a class="drawer-link" href="room.html">ナビ1</a></li> 35 <li class="drawer-content-item"><a class="drawer-link" href="food.html">ナビ2</a></li> 36 <li class="drawer-content-item"><a class="drawer-link" href="spa.html">ナビ3</a></li> 37 </ul> 38 </div> 39 <div class="drawer-background top-background"></div>
SCSS
1$color-white: #fff; 2$color-black: #000; 3 4// 表示幅 // 5$layout-width-inner: 1200px; 6 7//ブレークポイント// 8$breakpoints: ( 9//キー : 値 10 'sp': "(max-width: 767px)", 11 'tab': "(min-width: 768px) and (max-width: #{$layout-width-inner - 1px})", 12 'pc': "(min-width: #{$layout-width-inner})" 13) !default; 14 15//メディアクエリー// 16@mixin mq($breakpoint:sp) { 17 @media #{map-get($breakpoints, $breakpoint)} { 18 @content; 19 } 20} 21.inner { 22 width: 100%; 23 max-width: 100%; 24 margin: 0 auto; 25 padding-right: 20px; 26 padding-left: 20px; 27 28 @include mq('sp') { 29 padding-right: 20px; 30 padding-left: 20px; 31 } 32 33 @include mq('tab') { 34 padding-left: 24px; 35 padding-right: 24px; 36 } 37} 38 39// header 40.header__main-page-fixed { 41 background: $color-white; 42 height: 80px; 43 position: fixed; 44 z-index: 100; 45 width: 100%; 46 top: 0; 47 display: none; 48 49 .header__lower-logo { 50 width: 200px; 51 max-width: 100%; 52 53 &.negative { 54 display: none; 55 } 56 57 @include mq('sp') { 58 width: 150px; 59 } 60 } 61 62 .header-nav { 63 color: $color-black; 64 } 65} 66.header__main-page { 67 background: $color-black; 68 height: 80px; 69 width: 100%; 70 71 .header__main-logo { 72 width: 200px; 73 max-width: 100%; 74 75 @include mq('sp') { 76 width: 150px; 77 } 78 } 79} 80.header-inner { 81 display: flex; 82 align-items: center; 83 height: inherit; 84 width: 100%; 85 max-width: 100%; 86 87 @include mq('tab') { 88 width: 100%; 89 } 90 91 @include mq('sp') { 92 width: 100%; 93 } 94} 95.header-nav { 96 color: $color-white; 97 display: flex; 98 margin-left: 120px; 99 100 li { 101 &:not(:first-child) { 102 margin-left: 30px; 103 } 104 } 105 106 a { 107 &:hover { 108 opacity: 0.7; 109 } 110 } 111 112 @include mq('sp') { 113 display: none; 114 } 115} 116// ハンバーガーメニュー 117.drawer-icon { 118 position: fixed; 119 top: 27px; 120 right: 20px; 121 z-index: 300; 122 display: none; 123 transition: transform 0.5s ease 0s; 124 125 @include mq('sp') { 126 display: block; 127 } 128 129 &.is-active { 130 transform: translateX(-300px); 131 132 .drawer-icon-bar1 { 133 transform: rotate(-45deg); 134 top: 8px; 135 background: $color-white; 136 } 137 .drawer-icon-bar2 { 138 display: none; 139 } 140 .drawer-icon-bar3 { 141 transform: rotate(45deg); 142 top: 8px; 143 background: $color-white; 144 } 145 } 146} 147 148 149.drawer-icon-bars { 150 width: 30px; 151 height: 26px; 152 display: block; 153 position: relative; 154} 155 156.drawer-icon-bar1, 157.drawer-icon-bar2, 158.drawer-icon-bar3 { 159 position: absolute; 160 width: 30px; 161 height: 2px; 162 top: 0; 163 left: 0; 164 transition: background-color 1s; 165 166 &.top-drawer { 167 transition: background-color 1s; 168 } 169} 170 171.drawer-icon-bar1 { 172 top: 0; 173} 174.drawer-icon-bar2 { 175 top: 13px; 176} 177.drawer-icon-bar3 { 178 top: 26px; 179} 180.drawer-content { 181 width: 300px; 182 height: 100%; 183 position: fixed; 184 right: 0; 185 top: 0; 186 background: $color-white; 187 z-index: 220; 188 transform: translateX(105%); 189 transition: transform 0.5s ease 0s; 190 191 &.is-active { 192 transform: translateX(0); 193 } 194} 195.drawer-content-items { 196 197} 198.drawer-content-item { 199 border-bottom: 1px solid #707070; 200 201 a { 202 display: block; 203 font-weight: bold; 204 color: $color-black; 205 text-decoration: none; 206 padding: 18px 20px; 207 position: relative; 208 209 &::after { 210 content: ""; 211 position: absolute; 212 right: 20px; 213 top: 50%; 214 transform: translateY(-50%); 215 width: 8px; 216 height: 11px; 217 } 218 } 219} 220.drawer-background { 221 position: fixed; 222 top: 0; 223 left: 0; 224 width: 100%; 225 height: 100%; 226 background-color: rgba(#000, 0.8); 227 z-index: 200; 228 display: none; 229 230 &.is-active { 231 display: block; 232 } 233 234 &.top-background { 235 background-color: rgba(#000, 0.8); 236 } 237}
JS
1// トップページからスクロールしたらヘッダーを上からぬるりと表示させる 2var headNav = $(".header__main-page-fixed"); 3/* 初期表示、スクロール時にイベント開始 */ 4jQuery(window).on("load scroll", function () { 5 /* スクロール位置の高さが100pxより大きい、かつis-fixedクラスがない場合 */ 6 if (jQuery(this).scrollTop() > 100 && headNav.hasClass("is-fixed") == false) { 7 headNav.css("display", "block"); 8 headNav.css({ "top": "-80px" }); /* ヘッダーの高さ分マイナスにする */ 9 headNav.addClass("is-fixed"); 10 headNav.animate({ "top": 0 }, 600); 11 } 12 /* スクロール位置の高さが100pxより小さい、かつis-fixedクラスがある場合 */ 13 else if (jQuery(this).scrollTop() < 100 && headNav.hasClass("is-fixed") == true) { 14 headNav.removeClass("is-fixed"); 15 headNav.css("display", "none"); 16 } 17}); 18// トップページからスクロールしたらハンバーガーメニューの色を変える 19jQuery(window).on('scroll',function(){ 20 if ( 100 < jQuery(this).scrollTop()){ 21 jQuery('.top-drawer').css('background-color', '#000'); 22 } 23 else { 24 jQuery('.top-drawer').css('background-color', '#fff'); 25 } 26}); 27// ドロワーメニュー 28jQuery('.drawer-icon').on('click', function(e) { 29 e.preventDefault(); 30 jQuery('.drawer-icon').toggleClass('is-active'); 31 jQuery('.drawer-content').toggleClass('is-active'); 32 jQuery('.drawer-background').toggleClass('is-active'); 33return false; 34}); 35 36// backgroundをクリックしたら閉じる 37jQuery('.drawer-background').on('click', function() { 38 jQuery('.drawer-icon').removeClass('is-active'); 39 jQuery('.drawer-content').removeClass('is-active'); 40 jQuery('.drawer-background').removeClass('is-active'); 41 return false; 42}); 43
試したこと
JS20行目で
if ( 100 < jQuery(this).scrollTop() && jQuery('.drawer-icon').hasClass('is-active') == false)
を試しましたが変わりませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/04/18 01:00
2023/04/18 01:30
2023/04/18 11:10
2023/04/18 11:47