WPでハンバーガーメニューを上部で固定し、スクロール後に再表示したい。

<header class="header">
    <div class="header-fixed">
      <!-- <div class="header-logo"><img src="#" alt="#">
      </div>
      //ハンバーガー
      <div class="openbtn">
        <div class="openbtn-area">
          <span></span><span></span><span></span>
        </div>
      </div> -->
      <div class="header-fixed">
        <div class="header-logo"><img src="<?php echo get_template_directory_uri(); ?>/img/icon.PNG" alt="#"></div>
        <!-- <button class="nav-btn" id="nav-btn" type="button" aria-label="メニュー"><span></span><span></span><span></span></button> -->

        <div id="navArea">

          <nav>
            <div class="inner">
              <ul>
                <li><a href="#top-title">#</a></li>
                <li><a href="#member">#</a></li>
                <li><a href="#ceo">#</a></li>
                <li><a href="<?php echo home_url('contact'); ?>">#</a></li>
              </ul>
            </div>
          </nav>

          <div class="toggle_btn">
            <span></span>
            <span></span>
            <span></span>
          </div>

          <div id="mask"></div>

        </div>


      </div>
    </div>

.header .toggle_btn {
  display: block;
  position: fixed;
  right: 30px;
  width: 30px;
  height: 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 3;
}

.header .toggle_btn span {
  display: block;
  position: absolute;
  right: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.header .toggle_btn span:nth-child(1) {
  top: 4px;
}

.header .toggle_btn span:nth-child(2) {
  top: 14px;
}

.header .toggle_btn span:nth-child(3) {
  bottom: 4px;
}

.header .open .toggle_btn span {
  background-color: #000;
}

.header .open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}

.header .open .toggle_btn span:nth-child(2) {
  opacity: 0;
}

.header .open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}