headerのbg-color,header-item,humbergerの色をhight,100pxを基準に白黒変更させたい

前提・実現したいこと

表題の通り、headerのbg-color,header-item,humbergerの色をhight,100pxを基準に白黒変更させたい

更新しないと、transparentにならない。→100px over後に改めて<100pxになってもbg-colorがtransparentにならないため、logoなどが隠れたままの状態になってしまいます。

発生している問題・エラーメッセージ

試行錯誤しましたが、できませんでしたjsの文法やclass名の選択ミスを確認し、修正したもののできません。

試したこと

jsの確認。→文法ミスなどをdivtoolで確認。
jsで文字色のjs記述

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>石</title>
8   
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11    <!--flatpicker-->
12    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
15    <link rel="stylesheet" href="./css/style.css">
16    
17</head>
18<body>
19    <header class="header">
20        <div class="header-innner">
21            <div class="header-left">
22                <img id="logo" src="./img/top-header-logo.png" alt="">
23                <nav class="nav">
24                    <ul class="header-list">
25                        <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
26                        <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
27                        <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
28                    </ul><!-- /.header-list -->
29                </nav><!-- /.nav -->
30            </div>
31            <div class="header-right">
32                <div class="header-link" id="js-modal">
33                    <a class="calender-link js-modal-open" href="#">
34                        <!-- <img src="./img/calender.png" alt="カレンダー"> -->
35                        宿泊予約
36                    </a>
37                </div><!-- /.header-link -->
38
39                <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
40                    <span class="line"></span ><span class="line"></span><span class="line"></span>
41                </button>
42            </div><!-- /.header-right -->
43        </div><!-- /.header-innner -->
44   
45   
46    </header><!-- /.header -->

CSS
1.header {
2  position: fixed;
3  top: 0;
4  z-index: 999;
5  width: 100%;
6  max-height: 80px;
7  background-color: transparent;
8  display: -webkit-box;
9  display: -webkit-flex;
10  display: -ms-flexbox;
11  display: flex;
12  -webkit-box-pack: justify;
13  -webkit-justify-content: space-between;
14      -ms-flex-pack: justify;
15          justify-content: space-between;
16  padding: 10px 20px;
17}
18
19@media screen and (min-width: 600px) and (max-width: 1179px) {
20  .header {
21    padding: 15px 20px;
22  }
23}
24
25.header-inner {
26  max-width: 1880px;
27  width: 100%;
28  display: -webkit-box;
29  display: -webkit-flex;
30  display: -ms-flexbox;
31  display: flex;
32  -webkit-box-align: center;
33  -webkit-align-items: center;
34      -ms-flex-align: center;
35          align-items: center;
36  margin: 0 auto;
37}
38
39.header-left {
40  display: -webkit-box;
41  display: -webkit-flex;
42  display: -ms-flexbox;
43  display: flex;
44  -webkit-box-pack: left;
45  -webkit-justify-content: left;
46      -ms-flex-pack: left;
47          justify-content: left;
48  -webkit-box-align: center;
49  -webkit-align-items: center;
50      -ms-flex-align: center;
51          align-items: center;
52}
53
54.header-left h1 {
55  display: block;
56}
57
58.header-left h1 .logo img {
59  display: block;
60  width: 130px;
61  height: 130px;
62  margin: 20px 120px 20px 20px;
63}
64
65.header-left .nav {
66  display: -webkit-box;
67  display: -webkit-flex;
68  display: -ms-flexbox;
69  display: flex;
70  -webkit-box-pack: justify;
71  -webkit-justify-content: space-between;
72      -ms-flex-pack: justify;
73          justify-content: space-between;
74  -webkit-box-align: center;
75  -webkit-align-items: center;
76      -ms-flex-align: center;
77          align-items: center;
78  margin-left: 120px;
79}
80
81.header-left .nav .header-list {
82  display: -webkit-box;
83  display: -webkit-flex;
84  display: -ms-flexbox;
85  display: flex;
86  -webkit-box-align: center;
87  -webkit-align-items: center;
88      -ms-flex-align: center;
89          align-items: center;
90  padding-top: 20px;
91  padding-bottom: 20px;
92}
93
94@media screen and (max-width: 599px) {
95  .header-left .nav .header-list .header-item {
96    padding: 20px;
97    font-size: 2rem;
98  }
99}
100
101.header-left .nav .header-list .header-item + .header-item {
102  padding-left: 30px;
103}
104
105.header-left .nav .header-list .header-item > a {
106  color: #fff;
107  display: inline-block;
108  -webkit-transition: .3s;
109  transition: .3s;
110  /* 0.3秒で拡大までの時間 */
111}
112
113@media screen and (min-width: 600px) and (max-width: 1179px) {
114  .header-left .drawer-nav {
115    top: 80px;
116    position: fixed;
117    z-index: 2;
118    overflow: hidden;
119    width: 16.25rem;
120    background-color: #000;
121    width: 50%;
122  }
123}
124
125@media screen and (max-width: 599px) {
126  .header-left .drawer-nav {
127    top: 60px;
128    position: fixed;
129    z-index: 2;
130    overflow: hidden;
131    width: 16.25rem;
132    background-color: rgba(0, 0, 0, 0.9);
133    width: 75%;
134  }
135}
136
137.header-right {
138  margin-left: auto;
139}
140
141.header-right .header-link {
142  /*  height: calc(54/80*100%);
143                background-color: $link-color;
144                border-radius: 3px;
145                padding: 15px 35px;
146                display: flex;
147                justify-content: flex-end;
148                align-items: center; */
149}
150
151@media screen and (min-width: 600px) and (max-width: 1179px) {
152  .header-right .header-link {
153    margin-left: auto;
154  }
155}
156
157.header-right .header-link .calender-link {
158  display: block;
159  background-color: #978F10;
160  text-decoration: none;
161  font-weight: bold;
162  -webkit-box-align: center;
163  -webkit-align-items: center;
164      -ms-flex-align: center;
165          align-items: center;
166  text-align: center;
167  color: #fff;
168  padding: 10px 37px;
169  font-size: 1.6rem;
170  -webkit-transition: .3s;
171  transition: .3s;
172}
173
174@media screen and (min-width: 600px) and (max-width: 1179px) {
175  .header-right .header-link .calender-link {
176    margin-right: 180px;
177  }
178}
179
180.header-right .header-link .calender-link::before {
181  content: "";
182  display: inline-block;
183  margin: -3px 5px 0 0;
184  background: url(../../img/calender.png) no-repeat;
185  background-size: contain;
186  vertical-align: middle;
187  width: 22px;
188  height: 22px;
189}
190
191.header-right .header-link .calender-link:hover {
192  background-color: #000;
193}
194
195

js
1/* header-top.css */
2
3
4//let 
5let header     = $('.header');
6let logo = $('#logo');
7let item    = $('.header-item');
8let nav    = $('.nav');
9let link    = $('.link');
10
11$(function(){
12  $(window).scroll(function(){
13    if($(this).scrollTop()>=100){
14      //$("#logo").attr("src", "")
15
16      //header-bgを白に変更
17      header.css('background','#fff');
18      //logoを変更
19      logo.attr('src', '../img/sub-header-logo.png');
20      //aタグで囲った文字を黒に変更
21      item.find('a').css('color', '#000');
22        //ハンバーガーアイコンを黒に変更
23        $('head').append('<style>.line { background: #000; } </style>');
24        //$('head').append('<style>.drawer-hamburger-icon::after { background: #000; } </style>');
25        link.css('background-color','#000');
26        if (window.matchMedia( "(min-width: 1179px)" ).matches) {
27          nav.css('background-color','transparent');
28         } else {
29            nav.css('background-color','#fff');
30          }
31        // ドロワーの色を白に
32        } else {
33       
34          // 画面がトップから100px以下の時は、上記と逆の処理を行う
35          header.css('background','transparent');
36          logo.attr('src', '../img/top-header-logo.png');
37          link.find('a').css('color', '#fff');
38          // drawer.css('background-color','#000');
39          $('head').append('<style>.line{ background: #fff; } </style>');
40          //$('head').append('<style>.drawer-hamburger-icon::after { background: #fff; } </style>');
41          link.css('background-color','#fff');
42          if (window.matchMedia( "(min-width: 1179px)" ).matches) {
43            nav.css('background-color','transparent');
44          } else {
45              nav.css('background-color','rgba(0,0,0,0.9)');
46            }
47        }
48      });
49    });

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

.lineにサイズがないからでは。その他については動作しているようです。

蛇足ですが、head要素にstyle要素を追加してスタイルの変更を行うのはお勧めできないです。

投稿2021/10/08 05:00

Lhankor_Mhy

総合スコア36140

free_teku

2021/10/09 15:30

ご回答ありがとうございます。 .lineにサイズがないというのは、cssにという認識でよろしいでしょうか？ jsのことのようにも思えますが、、

Lhankor_Mhy

2021/10/10 12:36

そうですね。CSSの話です。

free_teku

2021/10/11 06:41

おっしゃる通りでした。ご回答ありがとうございます。ハンバーガメニューのlineの色は治りました因みに、、bg-color: #fff;がスクロールしたままだと、もとのtranspartに戻らないのですが原因はわかりますか？

free_teku

2021/10/11 06:53

lineにサイズ書いたらできました。ありがとうございます。ですが、一つ画像が切り替わらないためお伺いします Logo.attr('src', 'img/sub-header-logo.png');が原因のように思い相対パスを確認し、script.jsからみて Logo.attr('src', '../img/sub-header-logo.png'); に変更しましたができませんでした。フォルダー構造は下記です js---------------------img |　　　　　　　　　　| script.js top-sub～.img という構造です何卒よろしくお願いいたします。

Lhankor_Mhy

2021/10/11 07:27

> bg-color: #fff;がスクロールしたままだと、もとのtranspartに戻らないのですが原因はわかりますか？そうしたいのだと思っていましたが、違うのですね。どういう時にtranspartに戻したいのですか？ --- > フォルダー構造は下記ですこれは、jsフォルダと imgフォルダが同じ場所にあるという理解で合っていますか？ HTMLはどこにありますか？

free_teku

2021/10/11 07:40

早速お答えいただきありがとうございます。 1については間違えました。こちらは解決しました。 2.ですが、js,imgは同じ階層です。 HTMLもjs,imgと同じ階層です。

Lhankor_Mhy

2021/10/11 07:51 編集

つまり、画像ファイルはHTMLより一つ下の階層にあるのですね。であれば、img/sub-header-logo.png でいいと思います。

free_teku

2021/10/11 07:58

おっしゃる通りなのですが、反映されません。原因が何なのか、、、不思議です。苦笑

Lhankor_Mhy

2021/10/11 08:02

とりあえず、top-header-logo.png の方から表示できるように取り組んでみてはどうですか？