JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:300px;"></div>
	<div id="fixedbox">BLUE BOX</div>
	<div id="linktofreeze"><a href="#">This link freezes the blue box</a></div>
  <div id="linktounfreeze"><a href="#">After the link above is clicked, this link should unfreeze the box, but it doesn't do anything</a></div>
  <div style="height:1000px;"></div>

CSS

#fixedbox {background:blue; height:200px; width:200px;}
#linktofreeze {position:fixed;left:0;top:0;}
#linktounfreeze {position:fixed;left:0;top:20px;}

JavaScript

$('#linktofreeze').click(function() {
    
    var ftop = $('#fixedbox').offset().top - $(window).scrollTop();
    var fleft = $('#fixedbox').offset().left;
    $('#fixedbox').css({position: 'fixed', left: fleft + 'px', top: ftop + 'px'});
});