[jQuery]ハンバーガーメニューの中身を表示するには...

Question

お世話になります。
jQueryの記述について、行き詰まってしまったので、ぜひ教えてください。よろしくお願い致します

現在の状況

トップ画面の最上部にハンバーガーメニューを実装しました。
こちらはfixedしてあります。
トップ画面から全くスクロールしなければ、クリック時にメニューの中身がちゃんと表示されるのですが、
いくらかスクロールしたのちにクリックすると、中身が表示されません。どのように記述すると良いでしょうか。

    <header id="header">
      <div class="container-fluid">
        <div class="row">
          <div class="top col-12">
            <img src="img/logo.svg" class="">
            <div class="nav">
              <div class="nav-item">CONCEPT</div>
              <div class="nav-item">PRODUCTS</div>
              <div class="nav-item">NEWS</div>
              <div class="nav-item stores">STORES
                <ul>
                  <li><a href="" class="list">Shop List</a></li>
                  <li><a href="" class="list">Online Store</a></li>
                  <li><a href="" class="list">Amazon</a></li>
                </ul>
              </div>
            </div>
            <div class="toggle">
              <div class="in">
                <div>
                  <div class="t t1">
                    <span>::after</span>
                  </div>
                  <div class="t t2">
                    <span>::after</span>
                  </div>
                  <div class="t t3">
                    <span>::after</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="hamburger container-fluid">
      <div class="row">
        <div class="content-hum">
          <div class="menu">
            <ul>
              <li><a href="" class="item">Shop List</a></li>
              <li><a href="" class="item">Online Store</a></li>
              <li><a href="" class="item">Amazon</a></li>
            </ul>
          </div>
          <div class="items">
            <ul class="lang">
              <li><a href="" class="">日本語</a></li>
              <li><a href="" class="">English</a></li>
              <li><a href="" class="korea">한국어</a></li>
            </ul>
            <ul class="about">
                <li><a href="" class="">Company</a></li>
                <li><a href="" class="">Contact</a></li>
                <li><a href="" class="">Privacy Policy</a></li>
                <li><i class="fab fa-facebook-f" href=""></i></li>
                <li><i class="fab fa-instagram" href=""></i></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

.toggleがハンバーガーメニュー外身、.hamburgerが中身です。

  .toggle { cursor: pointer; z-index: 101; height: 118px; width: calc(5vw + 80px); position: fixed; right: 0; top: 55px;
  }
  .toggle .in { display: flex; align-items: center; justify-content: center; }
  .toggle .t { width: 18px; height: 3px; transition: all 0.3s; }
  .toggle .t span { position: relative; width: 100%; height: 100%; display: block; background-color: #111; overflow: hidden; }
  .toggle .t2 { margin: 2px 0; }
  .is-menu--open .toggle .t1 { transform: translate(0px, 5px) }
  .is-menu--open .toggle .t3 { transform: translate(0px, -5px) }
  .toggle .t span:after { content: '';  width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; background: #999; transform: translateX(-100%); transform-origin: 0% 50%; }
  .toggle:hover .t span:after { transform: translateX(100%); transition: all .6s ease-in-out; }
  .toggle:hover .t2 span:after { transition-delay: 0.1s; }
  .toggle:hover .t3 span:after { transition-delay: 0.2s; }

.hamburger {
  .menu {
    padding-bottom: 61px;
    ul {
      position: relative;
      right: 11vw;
      text-align: right;
      margin-bottom: 0;

      li {
        float: none;
      }
      a {
        position: relative;
        display: inline-block;
        transition: .3s;
        font-size: 15px;
        margin: 5px 0;   
      }
      a::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 0;
        height: 1px;
        background-color: #526563;
        transition: .3s;
      }
    }
  }
  .content-hum {
    background-color: #fff;
    padding-bottom: 78px;
    padding-top: 102px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;

    .items {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      
      ul {
        display: flex;
        
        li {
          padding: 0 20px;
        }
      }
      .lang {
        margin-bottom: 0;
      }
      .about {
        margin-right: 150px;
        margin-bottom: 0;

        i {
          font-size: 1.4em;
        }
      }
    }
  }
}

$(function(){
   $(".hamburger").hide();
   $(".toggle").click(function(){
     $(".hamburger").fadeToggle(300);
   });
});

Comments

[Lhankor_Mhy]

「こちらはfixedしてあります」とのことですが、このfixedとは、position: fixed のことでしょうか？
そうであれば、その部分のコードをご提示いただけますか？

[退会済みユーザー]

コメントありがとうございます。
追記致しました。

[Lhankor_Mhy]

ハンバーガーだけを固定配置しているのですか？　メニュー自体は固定配置していないのですか？

[退会済みユーザー]

分かりづらくて大変申し訳ないです。
スクショを添付しました。concept などのメニューもposition: fixed;で固定しています。

[Lhankor_Mhy]

わかりにくくて申し訳ないのですが、当方がお聞きしているのは「ハンバーガーメニューのハンバーガーアイコンだけを固定配置して、ハンバーガーのメニュー部分（Shop Listなど）は固定していないのでしょうか？」ということです。

[退会済みユーザー]

なるほど、！
position: relative や　position: absolute などで固定しています。

[Lhankor_Mhy]

どうも、コミュニケーションがうまくいかないようなので、回答欄でコードで示しますね。

[Lhankor_Mhy]

コメント行き違い失礼しました。回答欄をご覧ください。

Answer 1

.hamburgerも固定配置してはいかがでしょう？

サンプル

  .hamburger {
    position: fixed;
    width: 100%;
    top: 0;

Comments

[退会済みユーザー]

情報が足りず、何度かやりとりにお付き合いくださり、ありがとうございました。
回答の記述を追加したところ、スクロール途中でもハンバーガーメニューの中身が表示されました！
大変助かりました。ありがとうございました。