回答編集履歴

1

jsを追記しました

2021/10/28 11:11

投稿

free_teku
free_teku

スコア103

test CHANGED
@@ -133,3 +133,107 @@
133
133
  }
134
134
 
135
135
  ```
136
+
137
+
138
+
139
+ ```js
140
+
141
+ /* header-top.css */
142
+
143
+
144
+
145
+ $(function(){
146
+
147
+
148
+
149
+ let header = $('.header');
150
+
151
+ let Logo = $('.header-logo');
152
+
153
+ let item = $('.header-item');
154
+
155
+ let drawer = $('.drawer-nav');
156
+
157
+ let line = $('.line');
158
+
159
+ $(window).scroll(function(){
160
+
161
+ if($(this).scrollTop()>=100){
162
+
163
+ //$("#logo").attr("src", "")
164
+
165
+
166
+
167
+ //header-bgを白に変更
168
+
169
+ header.css('background','#fff');
170
+
171
+ //logoを変更
172
+
173
+ Logo.attr('src', '/img/sub-header-logo.png');
174
+
175
+
176
+
177
+ //aタグで囲った文字を黒に変更
178
+
179
+ item.find('a').css('color', '#000');
180
+
181
+ //ハンバーガーアイコンを黒に変更
182
+
183
+ $('head').append('<style>.line { background: #000; } </style>');
184
+
185
+ //$('head').append('<style>.drawer-hamburger-icon::after { background: #000; } </style>');
186
+
187
+ line.css('background-color','#000');
188
+
189
+ if (window.matchMedia( "(min-width: 1179px)" ).matches) {
190
+
191
+ drawer.css('background-color','transparent');
192
+
193
+ } else {
194
+
195
+ drawer.css('background-color','#fff');
196
+
197
+ }
198
+
199
+ // ドロワーの色を白に
200
+
201
+ } else {
202
+
203
+
204
+
205
+ // 画面がトップから100px以下の時は、上記と逆の処理を行う
206
+
207
+ header.css('background','transparent');
208
+
209
+ Logo.attr('src', '/img/top-header-logo.png');
210
+
211
+ item.find('a').css('color', '#fff');
212
+
213
+ // drawer.css('background-color','#000');
214
+
215
+ $('head').append('<style>.line{ background: #fff; } </style>');
216
+
217
+ //$('head').append('<style>.drawer-hamburger-icon::after { background: #fff; } </style>');
218
+
219
+ line.css('background-color','#fff');
220
+
221
+ if (window.matchMedia( "(min-width: 1179px)" ).matches) {
222
+
223
+ header.css('background-color','transparent');
224
+
225
+ drawer.css('background-color','transparent');
226
+
227
+ } else {
228
+
229
+ drawer.css('background-color','rgba(0,0,0,0.9)');
230
+
231
+ }
232
+
233
+ }
234
+
235
+ });
236
+
237
+ });
238
+
239
+ ```