JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="fixed-header">Fixed Header</h1>
<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

CSS

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; visibility: hidden; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { visibility: visible; }

/* Fixed header */
.fixed-header {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: lime;
}
.fixed-header + h1 {
  margin-top: 1.5em;
}

JavaScript

var $window = $(window),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = $window.scrollTop();
  overlaySavedScrollLeft = $window.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = $window.scroll(function() {
    // Scroll back to saved position
    $window.scrollTop(overlaySavedScrollTop);
    $window.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});