JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div id="d"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias, voluptas soluta cupiditate.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, at voluptatem mollitia, fugit officiis est esse facere, quos nisi illum quaerat pariatur provident aut eaque totam alias,...

CSS

#d {
  position: fixed;
  z-index: 9999999;
  left: 30px;
  top: 30px;
  right: 30px;
  height: 300px;
  background: red;
}

JavaScript

var element = document.getElementById('d');
var hp   = document.body.scrollHeight,
    hw   = window.innerHeight,
    smax = hp - hw,
    smin = 0,
    hmin = 100,
    hmax = 300,
    ds   = smax - smin,
    dh   = hmax - hmin;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - (dh * s) / ds;

    element.style.height = h + 'px';
});