【jQuery】一定の高さまでスクロールしたらヘッダー背景色を変更する方法

<header class="header js-header">
<!-- 左右にロゴとナビゲーション配置 -->
</header>
<div class="fv">
<!-- ファーストビュー -->
</div>
<section class="about">
<!-- Aboutセクション -->
</section>

.header.change-color {
  background-color: #00cc99; //スクロールしたあとのヘッダー背景色
  transition: 0.3s;　
}

$(function () {
  $(window).on('scroll', function () {
      if ($('.fv').height() < $(this).scrollTop()) {
          $('.js-header').addClass('change-color');
    } else {
          $('.js-header').removeClass('change-color');
    }
  });
});

if ($('.fv').height() < $(this).scrollTop()) {

if ($('.fv').height() < $(this).scrollTop()) {
    $('.js-header').addClass('change-color');
} else {
    $('.js-header').removeClass('change-color');
}