levchak0910

<div id="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

html, body {margin: 0}
#wrap {
    border: 2px solid #000;
    display: flex;
    flex-flow: column nowrap;
    width: 100vw;
    height: 100vh;
}
header {
    flex: 0 0 100px;
    background: green;
}
footer {
    flex: 0 0 150px;
    background: blue;
}
main {
    flex: 1 1 auto;
    background: yellow;
}

Берите высоту этого элемента, "высоту" скролла, небольшие математические операции и готово.
Так как высота Вашего элемента всегда равна высоте окна браузера можно использовать screen.availHeight

let element = document.querySelector("Ваш элемент");
document.onscroll = () => {
    let percent = ( screen.availHeight - window.pageYOffset / 2 ) / screen.availHeight;
    if(percent <= 0) element.style.opacity = 0;
    else element.style.opacity = percent;
    console.log(percent);
};

На счет производительности посмотрите Debounce