opacity ändern onScroll

Schönen guten Tag, ich stehe nun den 3. Tag vor ein und demselben Problem und erhoffe mir hiermit Hilfe/neue Denkanstöße. Ich habe ein DIV und dieses soll die opacity 1 haben, wenn es genau im Center vom Bildschirm ist. Wenn es noch zu weit unten ist, soll die opacity langsam auf 1 steigen und wenn es über dem Center ist, soll die opacity auf 0 sinken. Ein Code zur detect von der scroll direction habe ich bereits:

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <!doctype html>
<html lang="de">
<head>
<script src="/image/jquery.js"></script>
<style>
  
body{
   display:flex;
   flex-direction:column;
   min-height:1500px;
}
header{
  background:#27abcd;
  height:100px;
  font-size:80px;
  text-align:center;
}
nav{
  font-size:40px;
  text-align:center;
  margin-bottom:500px;
  display:block;
  background:green;
}
.framebox{
  border:2px solid black;
  margin:120px auto;
  width:60vw;
  height:300px;
}
  </style>
 </head>
 <body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX