jQueryで背景の高さを取得したい

Question

ハンバーガーメニューが背景の黒い部分（特定の高さ）を超えたときに色が変わるようにしたいです。
imgHeightに背景の高さを取得した値を入れたいのですが、ヘッダーの高さになってしまいます。
var imgHeight = $('first').outerHeight();を var imgHeight = $('.first').outerHeight();にすると反応しなくなるのもなぜかわかりません。
拙い文章ですが、わかる方いましたら教えていただきたいです。

<header>
  <h1 class="site-title">
    <a href="./nmt.html">
      <img src="img/site-logo.png" class="logo" alt="ロゴ">
    </a>
  </h1>

  <!-- ハンバーガーメニュー部分 -->
<div class="drawer" id="burger">

  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
  <input type="checkbox" id="drawer-check" class="drawer-hidden" >

  <!-- ハンバーガーアイコン -->
  <label for="drawer-check" class="drawer-open" id="click">
    <span></span>
    <p class="menu">menu</p>
  </label>

  <!-- メニュー -->
  <nav class="drawer-content">
    <ul class="drawer-list" id="humber">
      <li class="drawer-item">
        <a href="#desa" style="text-decoration:none;">About</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#services" style="text-decoration:none;">Service</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#newses"  style="text-decoration:none;">news</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#contacts" style="text-decoration:none;">Contact</a>
      </li><!-- /.drawer-item -->
    </ul><!-- /.drawer-list -->
  </nav>
  <span class="burger-musk" id="musk"></span>
</div><!--drawer-->

</header>

<div class="contents">
<div class="first">
  <div class="company">
    <div class="copy-size">
      <p class="copy">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p>
       <h1 class="copy design">DESIGN<br>FOR<br>SMILE</h1>
    </div>
  </div>
</div><!--first-->
</div><!--contents-->

header {
  height: 60px;
  width: auto;
  position: absolute;
}

.logo {
  margin-left: 50px;  
}

.contents {
  height: 90%;
}
/*ファーストビュー*/
.contents {
  height: 100%;
}

.first {
  height: 100%;
  background-image: url(img/kv-img.png);
  height: 90%;
  width: 80%;
  background-size: cover;
  z-index: 5;
  padding: 0;
  margin: 0;
}

.first::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #222;
  width: 50%;
  height: 100%;
  z-index: -1;
}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 15%;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  float: right;
  z-index: 100;
  position: fixed;
  top: 0px;
  right: 0px;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/*menuクリックでトーンを下げる*/
#drawer-check:checked ~ .burger-musk{
  opacity: 1;
  transition: .8s;
}

/* メニューのデザイン*/
.drawer-content {
  width: 30%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(12, 12, 12, 0.911);
  transition: .5s;
  text-align: center;
  padding-top: 100px;
}

.drawer-content ul {
  list-style: none;
}

.drawer-content a {
  color: white;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 70%;/* メニューを画面に入れる */
}
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}
/*ハンバーガーメニュー*/
.drawer-open span,
.drawer-open span::before,
.drawer-open span::after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

.drawer-item {
  font-size: 30px;
  padding-bottom: 40px;
}

.drawer {
  display: block;
}

.burger-musk {
  background-color: rgba(56, 56, 56, 0.603);
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  opacity: 0
}

.drawer-open.change span,
.drawer-open.change span:before,
.drawer-open.change span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #222;
  transition: 0.5s;
  position: absolute;
}
.drawer-open.change span.change {
display: flex;
height: 60px;
width: 15%;
justify-content: center;
align-items: center;
position: relative;
z-index: 100;/* 重なり順を一番上に */
cursor: pointer;
float: right;
z-index: 100;
position: fixed;
top: 0px;
right: 0px;
}

body.nonscroll {
  overflow: hidden;
}
.menu {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 100px;
  padding-top: 0;
  font-family: 'arial black';
}

.copy {
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.copy-size p {
  padding-bottom: 10px;
  font-size: 20px;
}

.design {
  font-family: 'arial black';
  margin-top: 0;
  font-size: 80px;
}

.company {
  z-index: 100;
  padding-top: 180px;
  margin-right: -180px;
  display: flex;
  justify-content: flex-end;
}

.company h1 {
  font-size: 70px;
}

/*スクロールで色変更*/
jQuery(window).on('scroll', function () {
  var imgHeight = $('first').outerHeight();

  /*色変更*/
  if (jQuery(imgHeight).height() < jQuery(this).scrollTop()) { 
    $('.menu').css('color','#222');
    $('.drawer-open').addClass('change')
  } else {
     jQuery('.menu').css('color','#fff'); 
     $('.drawer-open').removeClass('change');
    }  
})

/*ハンバーガーメニュー開いたときスクロールしない*/
$('.drawer-open').click(function(){
  $('body').toggleClass('nonscroll');
}) 

Answer 1

jQuery(window).on('scroll', function () {
-  var imgHeight = $('first').outerHeight();
+  var imgHeight = $('.first').outerHeight();
  console.log(imgHeight + ' ' + jQuery(this).scrollTop());
  /*色変更*/
-  if (jQuery(imgHeight).height() < jQuery(this).scrollTop()) { 
+  if (imgHeight < jQuery(this).scrollTop()) { 
    $('.menu').css('color','#222');
    $('.drawer-open').addClass('change')
  } else {
     jQuery('.menu').css('color','#fff'); 
     $('.drawer-open').removeClass('change');
    }  
})

クラスセレクタは . が必要。

imgHeight にはすでに数値（高さ）が格納さているのに、jQuery().height() に入れたらエラーになる。

Comments

[azaz_wb]

二重に書いてしまっていたと言うことですね。
解決しました。
ありがとうございました。