mattborn/index.html

## index.html
  <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>
	<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>