【JS】固定headerを一定間スクロールしたら背景色を変える方法

https://yujiromx.com/change-color-header/

やった事まとめ

以下のコードをbodyの閉じタグ直前にコピペしてください。
訂正→worpressの場合はhead内にいれた方が良い！！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

どこまでいったら色を変えるか　今回first-v　までいったら色を変える　bodyに入れておく

<div class="first-v">
    <p>ファーストビュー</p>
</div>

ヘッダーの色をどう変えるか　 .change-color が付与される

どれくらいの時間で変化させるかを指定
.header {
    padding: 20px 0;
    position: absolute;
    position: fixed;
    max-width: 100%;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
    transition: background-color .5s, color .5s;
}

/* headerの色を変える */
.header.change-color {
    background-color: red;
}

肝心のJS　first-v　までスルロールすると　.header　に　.change－colorが付与される

// headerをスクロールすると、色が変わる
jQuery(window).on('scroll', function () {
    if (jQuery('.first-v').height() < jQuery(this).scrollTop()) {
        jQuery('.header').addClass('change-color');
    } else {
        jQuery('.header').removeClass('change-color');
    }
});