【ナビゲーション】スクロールの途中で背景色を付ける方法

グローバルナビゲーションを固定し、スクロールの途中で背景色が出てくるようにしたい
サイトに落ちている様々なコードを試しましたが、どれも反映されず困っています。

ご存じの方がいらっしゃいましたら、お手すきの際にご教示いただけますと幸いです。

html
1<body>
2    <header>
3      <div class="container1">
4        <div class="area_logo_header">
5          <a href="#"> <img class="logo" src="img/logo.png" alt="TOUMAI" /></a>
6        </div>
7        <!--area_logo_header-->
8        <nav class="nav_header">
9          <ul class="list_nav_header">
10            <li><a href="#">CONCEPT</a></li>
11            <li><a href="#">SERVICE</a></li>
12            <li><a href="#">NEWS＆COLUMN</a></li>
13            <li><a href="#">F＆Q</a></li>
14            <li><a href="#">CONTACT</a></li>
15          </ul>
16        </nav>
17        <nav class="nav_header2">
18          <ul class="sns_icon_header">
19            <li class="sns_icon">
20              <a href="#">
21                <img
22                  class="Instagram"
23                  src="img/Instagram_icon.png"
24                  alt="Instagram"
25              /></a>
26            </li>
27            <li class="sns_icon">
28              <a href="#">
29                <img class="Twitter" src="img/Twitter_icon.png" alt="Twitter"
30              /></a>
31            </li>
32            <li class="sns_icon">
33              <a href="#">
34                <img
35                  class="facebook"
36                  src="img/facebook_icon.png"
37                  alt="facebook"
38              /></a>
39            </li>
40          </ul>
41        </nav>
42      </div>
43      <!--/.container1-->
44    </header>
45 </body>
46</html>

css
1
2/* ヘッダー */
3header {
4  width: 100%;
5  top: 0;
6  left: 0px;
7  position: absolute;
8  position: fixed;
9  z-index: 10;
10  transition: 0.5s;
11}
12header > .container1 {
13  height: 100px;
14  display: flex;
15  align-items: center;
16  max-width: none;
17}
18/* 会社ロゴ */
19.area_logo_header img {
20  width: auto;
21  height: 55px;
22  display: block;
23  transition: 0.5s;
24}
25/* ヘッダーナビ */
26.nav_header {
27  margin: 0 0 0 auto;
28}
29.list_nav_header {
30  display: flex;
31  align-items: center;
32  margin: 0 -15px;
33}
34.list_nav_header > li {
35  padding: 0 30px;
36}
37.list_nav_header a{
38  transition: 0.5s;
39
40}
41/* SNSアイコン ヘッダー */
42.sns_icon_header {
43  display: flex;
44  align-items: right;
45  margin: 30px;
46}
47.sns_icon_header > ul {
48  list-style: none;
49}
50.sns_icon_header > li {
51  padding: 0 5px;
52}

どうぞよろしくお願いいたします。

Lhankor_Mhy

2021/01/13 05:51

補足願います。・「グローバルナビゲーションを固定し」とのことですが、これは header を position:fixed にするということでよろしいですか？・「スクロールの途中で背景色が出てくるようにしたい」をもう少し具体的にお願いします。（100pxスクロールしたらグローバルナビゲーションの背景を黒に、など。）・JavaScript タグがありませんが、CSS だけで実現したい、ということでしょうか？

rampram0924

2021/01/13 06:04

こんにちは。いつもご回答くださり、本当に有難うございます。本件はcssで実現したいと思っておりますが、JavaScriptの方が良いのでしょうか？理由はJavaScriptの勉強がまだ進んでいない為です。実現したいことは、すでにご指摘いただいた通り、500px程度スクロールしたらナビゲーションの背景を白くしたいと思っています。度々申し訳ございませんが、ご確認いただけますと嬉しいです。何卒宜しくお願いいたします。

Lhankor_Mhy

2021/01/13 06:06

わかりました。私見ですが、CSSでは難しいと思います。他の回答者をお待ちください。

rampram0924

2021/01/13 06:13

貴重なご回答ありがとうございます。 CSSだと難しいのですね。上記を実現させたいので、JavaScriptのコードを取り入れたいと思います！