Uncaught SyntaxError: Unexpected token { とエラーが出てしまうので改善したいです。

前提・実現したいこと

パララックスサイトを作ろうとしています。
Jqueryで特定の要素が画面に表示されたら、
背景が切り替わる、といった物にしたいのですが、コードを書いてみると、

Uncaught SyntaxError: Unexpected token { script.js:9

とエラーが出てしまいます！
上記のエラーが出ないようにして、
Jqueryで特定の要素が画面に表示されたら、背景が切り替わる、といった物にしたいです。

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

Uncaught SyntaxError: Unexpected token { bg_image.js:9

とエラーが出てしまい切り替わりません。
どなたか、ご教授ください。

該当のソースコード

HTML
1<head>
2	<!--CSSのstyle.css読み込み-->
3	<link rel="stylesheet" href="style.css">
4	<!--Jquery読み込み-->
5	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
6	<!--JavaScriptソース読み込み-->
7	<script type="text/javascript" src="script.js"></script>
8</head>
9<body>
10	<!--背景-->
11	<div id="bg">
12		<div class="bg_top"></div>
13		<div id="bg_fr"></div>
14	</div>
15
16	<!--メイン-->
17	<div id="top">
18	</div>
19	<div id="jigyo">
20	</div>
21</body>

CSS
1#bg {
2	position: fixed;
3	top: 0;
4	left: 0;
5	width: 100vw;
6	height: 100vh;
7}
8
9#bg_fr {
10	position: absolute;
11	top: 0;
12	left: 0;
13	width: 100%;
14	height: 100%;
15	background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.44) 33%,rgba(0,0,0,0.65) 50%);
16}
17
18
19.bg_top {
20	position: fixed;
21	top: 0;
22	left: 0;
23	width: 100%;
24	height: 100%;
25	background-image: url(2.jpg);
26	background-position: center;
27	background-size: cover;
28	-webkit-transition: .5s;
29	-o-transition: .5s;
30	transition: .5s;
31}
32
33.bg_jigyo {
34	position: fixed;
35	top: 0;
36	left: 0;
37	width: 100%;
38	height: 100%;
39	background-image: url(1.jpg);
40	background-position: center;
41	background-size: cover;
42	-webkit-transition: .5s;
43	-o-transition: .5s;
44	transition: .5s;
45}
46
47#top {
48	display: inline-block;
49	width: 100vw;
50	height: 100vh;
51}
52
53#jigyo {
54	position: absolute;
55	top: 100%;
56	left: 0;
57	display: inline-block;
58	width: 100%;
59	height: 100%;
60}

Jquery
1$(window).load(function (){
2    $(window).on('load scroll resize', function(){
3		var scrollvar = $(window).scrollTop();
4		var topScrollvar = $("#top").offset().top;
5		var jigyoScrollvar = $("#jigyo").offset().top;
6		var jissekiScrollvar = $("#jisseki").offset().top;
7		var contactScrollvar = $("#contact").offset().top;
8		var otherScrollvar = $("#other").offset().top;
9		If(scrollvar >= topScrollvar) {
10			$("#bg").addClass("bg_top");
11		} else {
12			$("#bg").removeClass("bg_top");
13		}
14
15		If (scrollvar >= jigyoScrollvar) {
16			$("#bg").addClass("bg_jigyo");
17		} else {
18			$("#bg").removeClass("bg_jigyo");
19		}
20
21		If (scrollvar >= jissekiScrollvar) {
22			$("#bg").addClass("bg_jisseki");
23		} else {
24			$("#bg").removeClass("bg_jisseki");
25		}
26
27		If (scrollvar >= contactScrollvar) {
28			$("#bg").addClass("bg_contact");
29		} else {
30			$("#bg").removeClass("bg_contact");
31		}
32
33		If (scrollvar >= otherScrollvar) {
34			$("#bg").addClass("bg_other");
35		} else {
36			$("#bg").removeClass("bg_other");
37		}
38	});
39});