JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="some_right_aligned_item">I don't jump around on page freeze/unfreeze :D</div>
  <div id="container-wrapper">
    <div id="content">
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <button id="addFixed">Toggle page freeze</button>
    </div>
  </div>
</body>

CSS

html, body {min-height:100%;font-family:"Helvetica";}
body {overflow-y:scroll; cursor:default;}

.fixed #container-wrapper {position:fixed;left:0;width:100%;}

#content {
  height:1000px;
}
#some_right_aligned_item {
	position: fixed;
	top: 20px;
	right: 20px;
	color: red;
}

JavaScript

//Freeze page content scrolling
function freeze() {
        if($("html").css("position") != "fixed") {
            var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
            if(window.innerWidth > $("html").width()) {
                $("html").css("overflow-y", "scroll");
            }
            $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
        }
}
//Unfreeze page content scrolling
function unfreeze() {
        if($("html").css("position") == "fixed") {
            $("html").css("position", "static");
            $("html, body").scrollTop(-parseInt($("html").css("top")));
            $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
        }
}
var frozen = false;
$( "#addFixed" ).click(function() {
	if(frozen) {
		unfreeze();
		frozen = false;
	} else {
		freeze();
		frozen = true;
	}
});