jQueryでスクロールであるエリアを過ぎたら背景色をつけたいが、エリア前でついてしまう

前提・実現したいこと

jQueryを使って、スクロールして#homeエリアを過ぎた時に、ヘッダーに背景色をつける、
またスクロールバックしてヘッダーが#homeエリアに重なったら背景色を戻す、という実装を試みています。

形はできたのですが、#homeエリアを過ぎる前、しかも少しでもスクロールすると背景色が反映されてしまいます。

発生している問題・エラーメッセージ

スクロールで#homeエリアを過ぎる前に背景色が反映されてしまいます。
少しでもスクロールすると背景色が反映されてしまいます。

該当のソースコード

HTML
1<body>
2    <div id="home">
3        <header>
4            <div class="header-wrapper">
5                <nav class="header-nav" id="header-nav">
6                    ...
7                </nav>
8            </div>
9        </header>
10
11        <div class="wrapper">
12            <div class="home-contents">
13                <h2>Design for Smile.</h2>
14                <p>快適なオフィスを<br>デザインする</p>
15            </div>
16        </div>
17    </div>
18</body>
19
20---別ページのhtml--- 
21<div class="contact-top big-bg" id="contact-top"> 
22　　<header> 
23　　　　<div class="header-wrapper">
24　　　　　 ... 
25　　　　</div> 
26　　</header> 
27</div>
28

CSS
1#home {
2    height: 60vw;
3    color: #ffffff;
4    position: relative;
5    background-color: beige;
6}
7.header-wrapper {
8        max-width: 1220px;
9        width: 100%;
10        margin: 0 auto;
11        padding: 0 20px;
12}
13.header-nav {
14        display: flex;
15        justify-content: space-between;
16        align-items: center;
17        font-style: italic;
18        padding: 30px 0;
19}
20.header-bg {
21    background-color: #282F35;
22    transition: all .1s;
23}
24
25---別ページのcss--- 
26.contact-top {
27   background-image: url(../images/contact-page-bgi@2x.jpg); 
28   height: 40vw; 
29   position: relative; 
30} 
31.header-bg { 
32   background-color: #282F35; transition: all .1s; 
33} 
34

jQuery
1$(window).on('load scroll',function() {
2    var homeHeight = $('#home').outerHeight();
3    var scroll = $(this).scrollTop();
4    if(scroll > homeHeight) {
5        $('header').addClass('header-bg');
6    } else {
7        $('header').removeClass('header-bg');   
8    }
9});
10
11---別ページのjQuery--- 
12$(window).on('load scroll',function() { 
13 var contactTopHeight = $('#contact-top').outerHeight(); 
14 var scroll = $(this).scrollTop(); 
15 if(scroll > contactTopHeight) { 
16  $('header').addClass('header-bg'); 
17 } else { $('header').removeClass('header-bg'); 
18} 
19});