トグルメニューをクリックで開いた時の高さを取得したい

Question

fixed固定させたheader内にトグルメニューがあります。
headerを通常はheight: auto;とし、
メニューを開いた際のheaderの高さが、ウィンドウの高さより高くなる場合は
メニューを開いた時にだけ、height: 100%; overflow-y: scroll; としてスクロール可能にしたいと思っています。

jQueryでメニューを開いた際のheaderの高さが、ウィンドウの高さより高くなる場合にだけ、
headerにscrollHeaderをいうクラスを追加して、.scrollHeaderにheight: 100%; overflow-y: scroll;を指定したいのですが、
以下のjavascriptの記述では、headerHeightがメニューを開く前の高さを取得してしまうようです。
headerHeightにメニューを開いた時の高さを取得するにはどうしたらよいのでしょうか？

<header id="header">
  <h1 id="logo"><a href="../index.php"><img src="../img/common/logo.svg" alt=""></a></h1>
  <div class="navWrap">
    <div class="navicon">
      <p class="nav-txt">MENU</p>
      <div class="nav-toggle"></div>
    </div>
    <div class="navBox">
      <nav id="globalNav">
        <ul class="gNav-main clearfix">
          <li><a href="#">ナビ</a></li>
          <li><a href="#">ナビ</a></li>
          <li><a href="#">ナビ</a></li>
          <li><a href="#">ナビ</a></li>
          <li><a href="#">ナビ</a></li>
          <li><a href="#">ナビ</a></li>
          <li><a href="#">ナビ</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

jQuery(function($){
	$(".navicon").on("click", function() {
		$(".navBox").slideToggle();
		$(this).toggleClass("active");

	  var windowHeight = window.innerHeight;
	  var headerHeight = $("#header").innerHeight();
	  if (windowHeight < headerHeight) {
		$("#header").toggleClass("scrollHeader");
	  }

	});
});

#header {
	width: 100%;
	height: auto;
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

#header.scrollHeader {
	height: 100%;
	overflow-y: scroll;
}
	
.navBox {
	display: none;
}

上記のように記述しましたが、うまくいかず、、headerHeightにクリックで展開後の高さを取得するにはどうしたらよいのでしょうか？

Answer 1

色々と足りない部分があるのでタイトルの「fixed固定させた要素内のナビゲーションをスクロールさせたい」について答えようと思います。
fixedで固定させた要素、この場合ナビゲーションの親要素になると思いますが
こちらには幅と高さを指定してあげます。
そして、縦方向にはみ出た場合にスクロールを許可すれば良いです。
CSSで

overflow-y:scroll;

です。
Jqueryだけで解決するよりも、なるべくCSSで指定をしてJqueryはトリガーに使う様にすると楽になるんじゃないかと思います。