headerのbg-color:whiteになる

前提・実現したいこと

表題の通り、headerのbg-color:whiteになる。→fv上にheaderを表示させたい

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

前提：100pxを超えると、bg-colorをwhiteに変更させるjsを組んでいます
Window 1162,3px以下になると白くなります。

試したこと

bg-colorがいつ白くなるか確認→上記の通り
→headerのresponsive時のコードを確認。paddingのみしか書いていない。→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    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
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 class="drawer drawer-right drawer-open" data-aos-easing="ease" data-aos-duration="2000" data-aos-delay="0">
19    <!-- <div class="nav-wrapper"> -->
20        <header class="header">
21            <div class="header-inner">
22                <div class="header-left">
23                    <h1 class="logo">
24                        <a href="#">
25                            <img class="header-logo" src="/img/top-header-logo.png" alt="">
26                        </a>
27                    </h1>
28
29                    <nav class="nav nav-open drawer-nav">
30                        <ul class="header-list">
31                            <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
32                            <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
33                            <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
34                        </ul><!-- /.header-list -->
35                    </nav><!-- /.nav -->
36
37                </div>
38                <div class="header-right">
39                    <div class="header-link " id="js-modal">
40                        <a class="calender-link js-modal-open" href="#">
41                            <!-- <img src="./img/calender.png" alt="カレンダー"> -->
42                            宿泊予約
43                        </a>
44                    </div><!-- /.header-link -->
45
46                    <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
47                        <span class="line"></span ><span class="line"></span><span class="line"></span>
48                    </button>
49                </div><!-- /.header-right -->
50            </div><!-- /.header-inner -->
51        </header><!-- /.header -->
52
53<section class="fv">
54            <ul class="slider">
55                <li><img src="./img/mainbg01.jpg" alt="1枚目"></li>
56                <li><img src="./img/mainbg02.jpg" alt="2枚目"></li>
57                <li><img src="./img/mainbg03.jpg" alt="3枚目"></li>
58            </ul>
59            <p class="fv-txt1">頑 張 る 人 の</p><!-- /.fv-txt -->
60            <p class="fv-txt2">頑 張 ら な い 時 間</p><!-- /.fv-txt2 -->
61        </section><!-- /.fv -->
62    <script src="js/jquery-3.6.0.min.js"></script>
63    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
64</body>
65</html>

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    position: fixed;
22    top: 0;
23    padding: 15px 20px;
24  }
25}
26
27@media screen and (max-width: 599px) {
28  .header {
29    position: fixed;
30    top: 0;
31    padding: 8px 10px;
32    max-height: 60px;
33  }
34}
35
36.header-inner {
37  max-width: 1880px;
38  width: 100%;
39  display: -webkit-box;
40  display: -webkit-flex;
41  display: -ms-flexbox;
42  display: flex;
43  -webkit-box-align: center;
44  -webkit-align-items: center;
45      -ms-flex-align: center;
46          align-items: center;
47  margin: 0 auto;
48  box-sizing: border-box;
49  -webkit-box-sizing: border-box;
50}
51
52.header-left {
53  display: -webkit-box;
54  display: -webkit-flex;
55  display: -ms-flexbox;
56  display: flex;
57  -webkit-box-pack: left;
58  -webkit-justify-content: left;
59      -ms-flex-pack: left;
60          justify-content: left;
61  -webkit-box-align: center;
62  -webkit-align-items: center;
63      -ms-flex-align: center;
64          align-items: center;
65}
66
67.header-left h1 {
68  display: block;
69}
70
71.header-left h1 .logo img {
72  display: block;
73  width: 130px;
74  height: 130px;
75  margin: 20px 120px 20px 20px;
76}
77
78.header-left .nav {
79  display: -webkit-box;
80  display: -webkit-flex;
81  display: -ms-flexbox;
82  display: flex;
83  -webkit-box-pack: justify;
84  -webkit-justify-content: space-between;
85      -ms-flex-pack: justify;
86          justify-content: space-between;
87  -webkit-box-align: center;
88  -webkit-align-items: center;
89      -ms-flex-align: center;
90          align-items: center;
91  margin-left: 120px;
92  /*  @include tb {
93                    display: none;
94                } */
95  /*  @include sp{
96                        right: -75%;
97                    } */
98}
99
100.header-left .nav .header-list {
101  display: -webkit-box;
102  display: -webkit-flex;
103  display: -ms-flexbox;
104  display: flex;
105  -webkit-box-align: center;
106  -webkit-align-items: center;
107      -ms-flex-align: center;
108          align-items: center;
109  padding-top: 20px;
110  padding-bottom: 20px;
111}
112
113.header-left .nav .header-list .header-item {
114  color: #fff;
115}
116
117@media screen and (max-width: 599px) {
118  .header-left .nav .header-list .header-item {
119    padding: 20px;
120    font-size: 2rem;
121  }
122}
123
124.header-left .nav .header-list .header-item + .header-item {
125  padding-left: 30px;
126}
127
128.header-left .nav .header-list .header-item > a {
129  color: #fff;
130  display: inline-block;
131  -webkit-transition: .3s;
132  transition: .3s;
133  /* 0.3秒で拡大までの時間 */
134}
135
136@media screen and (min-width: 600px) and (max-width: 1179px) {
137  .header-left .nav-open {
138    top: 80px;
139    position: fixed;
140    top: 150px;
141    right: 0;
142    right: -50%;
143    z-index: 2;
144    overflow: hidden;
145    width: 16.25rem;
146    background-color: #000;
147    width: 50%;
148    height: 60vh;
149    -webkit-transition: margin-left .5s;
150    transition: margin-left .5s;
151  }
152}
153
154@media screen and (max-width: 599px) {
155  .header-left .nav-open {
156    top: 60px;
157    position: fixed;
158    z-index: 2;
159    overflow: hidden;
160    width: 16.25rem;
161    background-color: rgba(0, 0, 0, 0.9);
162    width: 75%;
163    -webkit-transition: margin-left .5s;
164    transition: margin-left .5s;
165  }
166}
167
168.header-left .drawer-nav_active {
169  -webkit-transform: translateZ(0);
170          transform: translateZ(0);
171}
172
173.header-right {
174  margin-left: auto;
175}
176
177@media screen and (max-width: 599px) {
178  .header-right {
179    margin-left: 20px;
180  }
181}
182
183.header-right .header-link {
184  /*  height: calc(54/80*100%);
185                background-color: $link-color;
186                border-radius: 3px;
187                padding: 15px 35px;
188                display: flex;
189                justify-content: flex-end;
190                align-items: center; */
191}
192
193@media screen and (min-width: 600px) and (max-width: 1179px) {
194  .header-right .header-link {
195    margin-left: auto;
196  }
197}
198
199.header-right .header-link .calender-link {
200  display: block;
201  background-color: #978F10;
202  text-decoration: none;
203  font-weight: bold;
204  -webkit-box-align: center;
205  -webkit-align-items: center;
206      -ms-flex-align: center;
207          align-items: center;
208  text-align: center;
209  color: #fff;
210  padding: 10px 37px;
211  font-size: 1.6rem;
212  -webkit-transition: .3s;
213  transition: .3s;
214}
215
216@media screen and (min-width: 600px) and (max-width: 1179px) {
217  .header-right .header-link .calender-link {
218    margin-right: 100px;
219  }
220}
221
222@media screen and (max-width: 599px) {
223  .header-right .header-link .calender-link {
224    padding: 8px 16px;
225    font-size: 1.4rem;
226  }
227}
228
229.header-right .header-link .calender-link::before {
230  content: "";
231  display: inline-block;
232  margin: -3px 5px 0 0;
233  background: url(../../img/calender.png) no-repeat;
234  background-size: contain;
235  vertical-align: middle;
236  width: 22px;
237  height: 22px;
238}
239
240.header-right .header-link .calender-link:hover {
241  background-color: #000;
242}

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

回答1件

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