JSFiddle - React, Tailwind, and code Playground

HTML

<br/><br/><br/><br/><br/><br/><br/>
<div>
  <div id="myyy_bar" style="background:red;"> Here is window </div>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

JavaScript

var myyElement = document.getElementById("myyy_bar"); 
var EnableConsoleLOGS = true;			//to check the results in Browser's Inspector(Console), whenever you are scrolling
// ==============================================

window.addEventListener('scroll', function (evt) {
	var Positionsss =  GetTopLeft ();  
	if (EnableConsoleLOGS) { console.log(Positionsss); }
	if (Positionsss.toppp  > 70)	{ myyElement.style.position="relative"; myyElement.style.top = "0px";  myyElement.style.right = "auto"; }
	else							{ myyElement.style.position="fixed";	myyElement.style.top = "100px"; 		myyElement.style.right = "0px"; }
});



function GetOffset (object, offset) {
	if (!object) return;
	offset.x += object.offsetLeft;       offset.y += object.offsetTop;
	GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
	if (!object) return;
	scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
	if (object.tagName.toLowerCase () != "html") {          GetScrolled (object.parentNode, scrolled);        }
}

function GetTopLeft () {
	var offset = {x : 0, y : 0};		GetOffset (myyElement.parentNode, offset);
	var scrolled = {x : 0, y : 0};		GetScrolled (myyElement.parentNode.parentNode, scrolled);
	var posX = offset.x - scrolled.x;	var posY = offset.y - scrolled.y;
	return {lefttt: posX , toppp: posY };
}
// ==============================================