Fullpage.jsを使用した場合、指定エリア内に入ってもクラスが付与されない

前提・実現したいこと

Fullpage.jsを使用した上で、スクロールに追従しつつ指定エリア内に入ったらクラスを付与し、出たらクラスを剥奪する要素を作りたいです。

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

スクロールに追従するが、クラスが付与されていない。

該当のソースコード

html
1<div class="main" id="fullpage">
2	<div class="box area1 section"></div>
3	<div class="box area2 section"></div>
4	<div class="box area3 section"></div>
5</div>
6<div class="follow">
7    <div class="fixed scroll1"></div>
8	<div class="fixed scroll2"></div>
9</div>

css
1.main {
2	width: 100vw;
3	height: 100vh;
4}
5.box {
6	width: 100vw;
7	height: 100vh;
8}
9.follow {
10	position: fixed;
11	width: 250px;
12	height: 250px;
13    background-color: #0bd;
14}
15.fixed {
16	position: fixed;
17	width: 250px;
18	height: 250px;
19	opacity: 0;
20}
21.scroll1.display {
22    opacity: 1;
23}
24.scroll2.display {
25    opacity: 1;
26}
27
28.box:nth-child(even) {
29  background-color: #0db;
30}
31.box:nth-child(odd) {
32  background-color: #0bd;
33}
34.fixed:nth-child(even) {
35  background-color: #0db;
36}
37.fixed:nth-child(odd) {
38  background-color: #0bd;
39}

JavaScript
1$(document).ready(function() {
2 $('#fullpage').fullpage();
3});
4
5$(".main").scroll(function () {
6        let scrollTop = $(".main").scrollTop();
7        let areaTop = $(".area2").offset().top;
8        let areaBottom = areaTop + $(".area2").innerHeight();
9
10        if (scrollTop > areaTop && scrollTop < areaBottom) {
11            $(".scroll1").addClass("display");
12        } else {
13            $(".scroll1").removeClass("display");
14        }
15    });
16
17$(".main").scroll(function () {
18        let scrollTop = $(".main").scrollTop();
19        let areaTop = $(".area3").offset().top;
20        let areaBottom = areaTop + $(".area3").innerHeight();
21
22        if (scrollTop > areaTop && scrollTop < areaBottom) {
23            $(".scroll2").addClass("display");
24        } else {
25            $(".scroll2").removeClass("display");
26        }
27    });