Scrolling Made Simple

<html>
    <head>
      <title>Scrolling Made Simple</title>
      <style>
      * {
        box-sizing: border-box;
      }
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0;
        overflow: hidden;
        position: relative;
      }
      .dialog {
        background: rgba(0,0,0,.7);
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: fixed;
      }
      .story {
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 116px calc((100vw - 700px) / 2) 58px;
      }
      .sticky {
        height: 100%;
        left: 0;
        padding: 0 calc((100vw - 700px) / 2) 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
      }
      .sticky-space {
        height: calc(100vh - 175px);
      }

.sticky-admin,
      .sticky-header,
      .story-curator-band,
      .story-hero,
      .story-share-band,
      .story-article,
      .sticky-footer {
        padding: 20px;
      }
      .sticky-admin { background: white; }
      .story-curator-band { background: teal; }
      .story-hero {
        background: gray;
      }
      .sticky-header,
      .story-share-band {
        background: orange;
      }
      .story-article {
        background: white;
        height: 2000px;
      }
      .sticky-footer {
        background: white;
        border-top: 1px solid #ddd;
      }
      .sticky-admin,
      .sticky-header,
      .sticky-footer {
        pointer-events: all;
      }
      </style>
    </head>
    <body>
      <div class="dialog">
        <div class="story">
          <div class="story-curator-band">Curator Band</div>
          <div class="story-hero">Hero</div>
          <div class="story-share-band">Share Band</div>
          <div class="story-article">Article</div>
        </div>
        <div class="sticky">
          <div class="sticky-admin" onclick="a()">Sticky Admin</div>
          <div class="sticky-header" onclick="a()">Sticky Share Band</div>
          <div class="sticky-space" onclick="a()"></div>
          <div class="sticky-footer" onclick="a()">Sticky Nav</div>
        </div>
      </div>
      <script>function a(){console.log('pointer-events on')}</script>
    </body>
  </html>