jqueryを使用してのスクロール時のheader固定について

Question

前提

いつもお世話になっております。
今回お聞きしたいことは、スクロールした際headerを上部に固定する方法についてです。

php、css、jqueryを使用し、現在課題をこなしているのですが、画面をスクロールした際ヘッダーを固定することができずに悩んでいます。

実現したいこと

・jqueryでスクロールにて一定の箇所までスクロールしたらヘッダーが上部に固定され、上部のheader部に戻ると元に戻る。
→jqueryで対象のヘッダーのnav要素にスクロールをしたらclassが付与され、position: fixed;を記述し適応させる。上までスクロールするとclassが取り除かれ、ヘッダーが元の位置へ戻る。

このようなことがしたいのですが、上手くいきません。

該当のソースコード

<header>
    <nav id="menus">
        <div id="menu_logos">
            <a href="#" class="menu_logo"><img src="./img/logo.png"></a>
        </div>
        <div class="nav_list">
            <a href="#" class="menu">はじめに</a>
            <a href="#" class="menu">体験</a>
            <a href="#" class="menu">お問合せ</a>
        </div>
        <div class="menu_sinin">
            <a href="#" class="sinin_text">サインイン</a>
        </div>
    </nav>
        <div class="top_h1">
            <hi class="menu_toptext"><b>あなたと<br>今日を生きる</b></h1>
        </div>
</header>

header {
    background-image: url('./cafe/img/eyecatch.jpg');
    filter: opacity(80%);
    width: 100%;
    background-size: cover;
    background-position: center;
    height: 550px;
}

#menus {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 15px;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

#menu_logos {
    flex: 25%;
    display: flex;
    justify-content: space-between;
}

.menu_logo img {
    position: relative;
    top: 3px;
    left: 15%;
    margin: 0 auto;
    width: 85%;
    height: auto;
    filter: opacity(90%);
}

#menus a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.nav_list {
    flex: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nav_list a {
    padding: 0 1rem;
}

.menu_toptext {
    position: relative;
    width: 90%;
    top: 150px;
    left: 30px;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 85%;
}

.menu_sinin {
    position: relative;
    right: 5%;
    display: flex;
    flex: 25%;
    justify-content: flex-end;
}

.tennki {
    color: aqua;
}

$(function () {
 var scroll_text = $(#menus).offset().top;
    $(window).scroll(function(){
        if($(this).scrollTop() > scroll_text){
        $("#menus").addClass('lord_menu');
        } else {
        $("#menus").removeClass('lord_menu');
        }
    });
});

試したこと

css内に以下のことを記述しましたが、適応されないようです。

#menus .lord_menu {
 position: fixed;
 top: 0;
 z-index: 10;
width: 100%;

要素のcssに直接（lord_menu）のクラスを記述し、cssに記述すると色を変えたりすることが出来ますし、Googleの検証機能を使うとスクロールすることで確かにclassは付与されているようです。
1日記述を変えてみたり、そもそものjqueryを変えて見るなど、色々と考えましたが答えが出ずに1日終わってしまいました。
わかる方は教えていただきたいです。

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

ここにより詳細な情報を記載してください。

Answer 1

HTMLについて

タグがhiとなっている箇所があります。h1にしてください。

cssについて

#menus .lord_menu{}というようにしてしまうと id=“menus”の子要素 かつ class=“lord_menu” である要素に適用されています。
ゆえに、classをid=“menus”である要素に付与したところでcssの内容は反映されません。

id=“menus”かつclass=“lord_menu”である要素にcssをつけたい時、
#menus .lord_menu{}ではなく、#menus.lord_menu{}というようにすればいいかもです。(スペースが消えました。)

jqueryについて、

一部$(#menus)としている箇所がありました。$(“#menus”)としてください。

---

テストの写真も貼っておきます。(画像のurlを持っていないため、描いて代替しました。)

あと気にしないのならいいのですが、英語のスペルミスが散見されます。

Comments

[退会済みユーザー]

jqueryに関しては名前しか知らなかったため、サッと調べただけなので勘違い等あればご遠慮なく言いつけてください。

[退会済みユーザー]

ありがとうございます。
試してみたのですがやはり動かないですね…

id=menus に　lord_menu を追加し、文字を大きくする、backgroundcolorを変えると反映はされるので、恐らくposition: fiexd;が上手く動いていないものかとは思うのですが…

cssの書き方については、現在は
「#menus.lord_menus」 から　「.lord_manu」へ変更しています。

[退会済みユーザー]

.lord_menu へ変更することで、スクロールすると色が変わるので、本当にposition部だけかもしれません。

[退会済みユーザー]

ちょっと確認してきます

[退会済みユーザー]

すみません。
1日触り自己解決しました。
自己解決の欄に記入しますが、原因は親要素の「filter: opacity(80%);」が邪魔をしていたようです。
どうしてかわかりませんが、これで先に進めます。
回答いただきありがとうございました。

[退会済みユーザー]

ありがとうございました！
一応編集しといたんでそちらもどうぞ

[退会済みユーザー]

お忙しい中ありがとうございます。
スペルミスは未熟な私のせいなのですがw
今回ご指摘いただいたものを参考に明日直します。
本当にありがとうございました！！

[退会済みユーザー]

こちらこそ終始優しく対応してくださりありがとうございました！
また、俺もまだ未熟だなって気付かせてもらいました！
本当に感謝しかないです！また会った時はよろしくお願いします！

Answer 2

原因は親要素の「filter: opacity(80%);」が邪魔をしていたようです。

本当によくわかりませんが、これで先に進めます。