Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Reduced Reveal Stack">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reduced Reveal Stack</title>
</head>
<body>
​
  <div class="stack">
    <div class="stack-pages">
      <div class="stack-page">
        <div>
          <p>Used so that semantic flow of document doesn't need to be flipped altering the sequence then using flex-flow: column-reverse on flex container.</p>
<code><pre>
.stack-page:nth-child(1) {z-index: 999;}
.stack-page:nth-child(2) {z-index: 998;}
.stack-page:nth-child(3) {z-index: 997;}
.stack-page:nth-child(4) {z-index: 996;}
.stack-page:nth-child(5) {z-index: 995;}
.stack-page:nth-child(6) {z-index: 994;}
.stack-page:nth-child(7) {z-index: 993;}
.stack-page:nth-child(8) {z-index: 992;}
.stack-page:nth-child(9) {z-index: 991;}
/* ... */
.stack-end {z-index: 1;}
</pre></code>
        </div>
      </div>
      <div class="stack-page">Page 2</div>
      <div class="stack-page">Page 3</div>
      <div class="stack-page">Page 4</div>
      <div class="stack-page">Page 5</div>
      <div class="stack-page">Page 6</div>
    </div>
    <div class="stack-end">After</div>
  </div>
</body>
</html>
 
@import url('https://necolas.github.io/normalize.css/7.0.0/normalize.css');
​
:root {
  --stackHeight: 300px;
}
​
*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
​
html {
  box-sizing: border-box;
}
​
.stack {
  height: var(--stackHeight);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
​
.stack-page,
.stack-end {
  padding: .75em;
}
​
.stack-page {
  height: var(--stackHeight);
  background: #f90;
  
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  box-shadow: 0 4px 2px rgba(0,0,0,.25);
  
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
​
/* Using z-index setup so that semantic flow of document doesn't need to be reversed within a flex container with flex-direction: column-reverse */
.stack-page:nth-child(1) {z-index: 999;}
.stack-page:nth-child(2) {z-index: 998;}
.stack-page:nth-child(3) {z-index: 997;}
.stack-page:nth-child(4) {z-index: 996;}
.stack-page:nth-child(5) {z-index: 995;}
.stack-page:nth-child(6) {z-index: 994;}
.stack-page:nth-child(7) {z-index: 993;}
.stack-page:nth-child(8) {z-index: 992;}
.stack-page:nth-child(9) {z-index: 991;}
/* ... */
.stack-end {z-index: 1;}
​
/* only use this if there is 'stack-after' block */
.stack::after {
  content: '';
  display: block;
  height: var(--stackHeight);
  visibility: hidden;
}
​
.stack-end {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  min-height: calc(1.5 * var(--stackHeight));
  margin-top: calc(-1 * var(--stackHeight));
  background: #6cd;
  
  padding-top: calc(var(--stackHeight) - 2em);
}
​
code {
  font-size: .75em;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jonjohnjohnsonpro
0viewers