JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="myDiv"><span id="text">FADER</span></div>
<div id="myDiv2"></div>

<div id="page">
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
<p>whatever</p>
</div>

<div id="log">
Scroll Position: <span id="test">0</span><br>
Header Div Height: <span id="test2">0</span><br>
Opacity: <span id="test3">0</span>
</div>

CSS

body {margin:0;background-color:#ffffff;}
#myDiv {height:400px;background-color:#000000;position:fixed;width:100%;top:0;z-index:-10;color:#ffffff;font-family:arial;font-size:150px;display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
  #text {opacity:0.99;}
#myDiv2 {height:400px;}
#page {background-color:#ffffff;}

#log {position:fixed;bottom:0;right:0;background-color:#f8f8f8;padding:10px;border:1px solid #cccccc;}

JavaScript

let clientHeight = myDiv.clientHeight;
let mn = (clientHeight / 100);

window.addEventListener("scroll", (event) => {

var myDiv = document.getElementById('myDiv');

let scroll = document.documentElement.scrollTop;  


var newHeight = (clientHeight - scroll);

myDiv.style.height = newHeight + "px";

var opacity = Math.round((99 - (scroll / mn)));

if (opacity < 11) {opacity = 0;}

var text = document.getElementById('text');

var test3 = document.getElementById('test3');
test3.innerHTML = "0." + opacity;

text.style.opacity = "0." + opacity;

var test = document.getElementById('test');
test.innerHTML = scroll;

var test2 = document.getElementById('test2');
test2.innerHTML = clientHeight;
});