ヘッダーに画像が被ってしまう

前提

こんばんは。いつもお世話になっております。

今回お聞きしたいことは
「htmlの一部の要素が、fixedで固定しているヘッダーに被ってしまう。」
ということを質問させていただきます。

課題に取り組み中なのですが、ヘッダーの一部の画像を「opacity: 0.8;」とを適用し薄くしているんですが、それを行うとhtmlの一部がスクロールする際になぜかスクロールで固定しているリストにかかってしまいます。

こちらを解決したいので、知恵をお貸しいただけたらと思います。

実現したいこと

htmlをスクロールする際に、headerのリストに係る要素を下に移動させたい。

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

エラーメッセージ

該当のソースコード

html
1<header>
2    <nav id="menus">
3        <div id="menu_logos">
4            <a href="#" class="menu_logo"><img src="./cafe/img/logo.png"></a>
5        </div>
6
7<!-- ここが画面をスクロールすれば丈夫に固定されるようにしていますが、下記の位置で被ってしまう箇所です -->
8        <div class="nav_list">
9            <!-- <a href="/index.php#cafes_access" class="menu">はじめに</a> -->
10            <a href="#" class="menu menu_info">はじめに</a>
11            <!-- <a href="./index.php#cafe_make" class="menu">体験</a> -->
12            <a href="#" class="menu menu_cafe">体験</a>
13            <a href="./contact.php" class="menu">お問合せ</a>
14        </div>
15        <div class="menu_sinin">
16            <a href="#" class="sinin_text">サインイン</a>
17        </div>
18    </nav>
19        <div class="top_h1">
20            <hi class="menu_toptext"><b>あなたの<br>好きな空間を作る</b></h1>
21        </div>
22</header>
23
24<!-- ここから下が上にかぶさってしまう場所  GoToEats -->
25    <div class="GoToEats">
26        <div class="GoToEats_list">
27            <h3><b>Go To Eats</b></h3>
28            <p>キャンペーンを利用して、全国で食事しよう。<br>いつもと違う景色に囲まれてカラダもココロもリフレッシュ。</p>
29        </div>
30        <div class="GoToEats_img">
31            <img src="./cafe/img/goto.jpg">
32        </div>
33    </div>

css
1body {
2    margin: 0px;
3    padding: 0px;
4}
5
6.top_text {
7    background-color: black;
8    text-align: center;
9    padding: 14px;
10}
11
12
13.top_text a {
14    font-size: 14px;
15    color: white;
16}
17
18header {
19    background-image: url('./cafe/img/eyecatch.jpg');
20<!-- ここの箇所をコメントアウトするとうまくいく -->
21    opacity: 0.8;
22
23    width: 100%;
24    background-size: cover;
25    background-position: center;
26    height: 550px;
27    position: relative;
28}
29
30#menus {
31    display: flex;
32    justify-content: space-between;
33    margin: 0 auto;
34    padding-top: 15px;
35    width: 100%;
36    align-items: center;
37    flex-wrap: wrap;
38    transition: all 0.5s ease;
39}
40
41#menu_logos {
42    flex: 25%;
43    display: flex;
44    justify-content: space-between;
45}
46
47.menu_logo img {
48    position: relative;
49    top: 3px;
50    left: 15%;
51    margin: 0 auto;
52    width: 85%;
53    height: auto;
54    filter: opacity(90%);
55}
56
57#menus a {
58    color: rgba(255, 255, 255, 0.9);
59    text-decoration: none;
60}
61
62.nav_list {
63    flex: 50%;
64    display: flex;
65    flex-wrap: wrap;
66    justify-content: center;
67}
68
69.nav_list a {
70    padding: 0 1rem;
71}
72
73.menu_toptext {
74    position: absolute;
75    width: 90%;
76    top: 200px;
77    left: 30px;
78    font-size: 64px;
79    color: rgba(255, 255, 255, 0.85);
80    line-height: 85%;
81}
82
83.menu_sinin {
84    position: relative;
85    right: 5%;
86    display: flex;
87    flex: 25%;
88    justify-content: flex-end;
89}
90
91/* トップナビのスクロール固定 */
92.fixed {
93    background-color: black;
94    transition: all 0.5s ease;
95    width: 100%;
96    padding-bottom: 15px;
97    position: fixed;
98    top: 0;
99    animation: all 0.2s ease;
100    z-index: 99;
101}
102
103/* GoToEats */
104.GoToEats {
105    position: relative;
106}
107
108.GoToEats_list {
109    position: absolute;
110    top: 50px;
111    left: 50px;
112    background-color: rgba(255, 255, 255, 0.4);
113    padding: 10px;
114}
115
116.GoToEats_list h3 {
117    margin: 0;
118    font-size: 32px;
119
120}
121
122.GoToEats_list p {
123    margin: 0;
124    font-weight: 100;
125    background-color: rgba(255, 255, 255, 0.5);
126    font-size: 13px;
127}
128
129.GoToEats_img img {
130    width: 100%;
131    border-radius: 15px;
132}
133

jquery
1
2$(function () {
3	var elemTop = $('#menus').offset().top;
4	var scroll = $(window).scrollTop();
5    $(window).scroll(function(){
6        if($(this).scrollTop() > 50){
7        $("#menus").addClass('fixed');
8        } else {
9        $("#menus").removeClass('fixed');
10        }
11    });
12});
13

試したこと

「filter: (80%);」に指定したり、「z-index:999;」とかにしたのですがうまくいきません。
他に画像を薄くする、もしくは色味を変える物はあるのでしょうか？

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

すみません。全体的に改善する前のものを提示していました。
全体的にコードを直しています。

ご指摘ありがとうございます。配慮が足りずすみません。
再度修正致しましたので、確認していただければと思います。

hatena19

2022/09/12 00:43 編集

jQueryで lord_menu クラスを付与してますが、CSSには .lord_menu セレクタかないため、現象を確認できません。CSSに追記してください。

hatena19

2022/09/12 05:51

「flexで固定している」とありますが、flexでは固定できません。どのように固定しているのですか。変更したjQueryですが、#jump_top の要素はないし、DownMove や UpMove というクラスもありません。この質問とは関係ないものでないですか。また、変更前の方が関係ありそうでした。状況を再現出るコードかどうか確認してから、再現できるコードを提示してください。