JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header id="boite">hello</header>
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
    bla <br />
</body>

CSS

body {
    background-color : red;
}

header#boite {
    position : absolute;
    top : 100px;
    left : 200px;
    width : 100px;
    height : 25px;
    background-color : lightgreen;
    border : 2px solid green;
    text-align : center;
}

JavaScript

function scrollIt()
{
	var XX = 100;
	var YY = 10;

	/*=================================================================*/
	/*  XX = position top d'origine de la boite. Exemple : XX = 100;   */
	/*  YY = position TOP par rapport Ă  la page. Exemple : YY = 10;    */
	/*=================================================================*/

	var node = document.getElementById("boite");

	if (document.all)
			var posit = (document.documentElement.scrollTop < (XX-YY)) ? XX : document.documentElement.scrollTop + YY;
	else	var posit = (window.pageYOffset                 < (XX-YY)) ? XX : window.pageYOffset                 + YY;

	node.style.top = posit + "px";
}

window.onscroll = scrollIt;