スクロールと連動して画像をフェードインアウトするには

実現したいこと

画像は左側にposition: sticky;で固定＆追従。
右側のテキストエリアをスクロールするたびに、同じクラスを持つ画像に対してactiveクラスを付与して、フェードインアウトで切り替えるようにしたいです。

試したこと・問題点

下記のjqueryだと、スクロールしたときにcontentsが画面内に来たら画像にactiveクラスを付与出来ましたが
product02が表示されたときにproduct01が非表示にならず、そのまま下まで行くと３枚の画像が重なって表示されてしまいます。
下から上に戻るスクロールの時はactiveクラスが削除されているのを確認しましたが、activeの画像は一枚だけにしたいです。

html
1<div class="wrapper">
2       <!-- 画像のブロック -->
3		<div class="images">
4			<div class="product01"><img src="img/test01.png" alt=""></div>
5			<div class="product02"><img src="img/test02.png" alt=""></div>
6			<div class="product03"><img src="img/test03.png" alt=""></div>
7		</div>
8		<!-- コンテンツのブロック -->
9		<div class="contents">
10			<div class="product01">
11				<p>文字文字文字文字文字文字文字文字文字文字</p>
12			</div>
13			<div class="product02">
14				<p>文字文字文字文字文字文字文字文字文字文字</p>
15			</div>
16			<div class="product03">
17				<p>文字文字文字文字文字文字文字文字文字文字</p>
18			</div>
19		</div>
20	</div>
21</div>
22

css
1.wrapper{
2	display: flex;
3	justify-content: space-between;
4   position: relative;
5}
6/*コンテンツのブロック*/
7.contents{ width: 60vw; }
8.contents div{ padding-top: 50vh; }
9.contents div:last-child{ padding-bottom: 50vh; }
10/*画像のブロック*/
11.images{
12	width: 40vw;
13	height: 100vh;
14	display: flex;
15	align-items: center;
16	position: sticky;
17	position: -webkit-sticky;
18	top:0;
19}
20.images div {
21	height: 400px;
22	margin: auto;
23	display: block;
24	visibility: hidden;
25	background: #5bd2d2;
26	position: absolute;
27	top: 0;
28	bottom: 0;
29	transition: .5s;
30	opacity: 0;
31}
32.images div:first-child,
33.images div.active {
34　　　　transition: .5s;
35	opacity: 1;
36}

jQuery
1$(function(){
2	$(window).scroll(function () {
3		$('.contents div').each(function () {
4			boxNum = $(this).attr("class"),
5			scrollTop = $(window).scrollTop();
6			areaTop = $(this).offset().top;
7			if (scrollTop > areaTop) {
8				$('.images .' + boxNum).addClass('active');
9			} else{
10				$('.images .' + boxNum).removeClass('active');
11			}
12		});
13	});
14});