ericcecchi/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;

        display: flex;
        flex-direction: column;
      }
      .story {
        overflow-y: scroll;
        flex: 1 1 auto;
      }

      .sticky-admin,
      .sticky-header,
      .story-curator-band,
      .story-hero,
      .story-share-band,
      .story-article,
      .sticky-footer {
        padding: 20px;

        width: 100%;
        max-width: 700px;
        margin: 0 auto;
      }
      .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: none;

        flex: 0 0 auto;
      }
      </style>
    </head>
    <body>
      <div class="dialog">
        <div class="sticky-admin" onclick="a()">Sticky Admin</div>
        <div class="sticky-header" onclick="a()">Sticky Share Band</div>

        <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-footer" onclick="a()">Sticky Nav</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;

	display: flex;
	flex-direction: column;
	}
	.story {
	overflow-y: scroll;
	flex: 1 1 auto;
	}

	.sticky-admin,
	.sticky-header,
	.story-curator-band,
	.story-hero,
	.story-share-band,
	.story-article,
	.sticky-footer {
	padding: 20px;

	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	}
	.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: none;

	flex: 0 0 auto;
	}
	</style>
	</head>
	<body>
	<div class="dialog">
	<div class="sticky-admin" onclick="a()">Sticky Admin</div>
	<div class="sticky-header" onclick="a()">Sticky Share Band</div>

	<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-footer" onclick="a()">Sticky Nav</div>
	</div>
	<script>function a(){console.log('pointer-events on')}</script>
	</body>
	</html>