Scrolling Pages (Chrome)

index.html

<div class="helper"></div>
<section class="page">
  <h2>Page 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ratione quidem temporibus quisquam minus quae aliquam eaque dolorem impedit tempore nobis enim maiores aut vel eligendi atque, qui optio debitis!</p>
  <p>Veritatis quod quis dolorum iure modi rerum aliquam ad optio eveniet deserunt temporibus, eaque molestiae ut commodi distinctio accusantium ratione molestias possimus illo! Facere et possimus error in delectus iusto?</p>
</section>
<div class="helper"></div>
<section class="page">
  <h2>Page 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto odio suscipit optio, tempore. Sit qui modi enim repellendus, adipisci accusamus vitae, saepe ea repudiandae consequuntur, provident, explicabo necessitatibus laboriosam et!</p>
  <p>Quo nulla id suscipit consequuntur sunt error culpa asperiores? Asperiores necessitatibus similique, quibusdam quo libero, recusandae minus cupiditate repellat repudiandae. Adipisci placeat illo aspernatur tempora impedit, dolorum nemo. Molestias, odit.</p>
</section>
<div class="helper"></div>
<section class="page">
  <h2>Page 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod voluptas magnam ratione, minus quo sequi hic, doloribus quia aliquid accusamus placeat iure dicta vero et, ut cum eum molestiae esse?</p>
  <p>Maxime, commodi! Fuga quaerat exercitationem vero reprehenderit! Blanditiis voluptas aut eaque, debitis eos repudiandae maxime qui saepe aliquid voluptate libero ipsam quae nemo porro pariatur cumque eum, tempore expedita dolor!</p>
</section>
<div class="helper"></div>
<section class="page">
  <h2>Page 4</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nemo accusantium eius repudiandae, enim cumque consequatur, ex ipsam aspernatur fugit vel qui, commodi, perferendis labore maiores at quisquam modi dolor!</p>
  <p>Recusandae eligendi veniam voluptate perferendis, dolorum sed laborum quibusdam ipsam optio autem pariatur, tenetur dolores accusantium ullam saepe at magnam nisi accusamus, esse dolore rem alias tempore ipsum. Veritatis, ipsum.</p>
</section>
<section class="footer">
  <section>
    <h3>Footer</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, quam odio eius atque consequatur laboriosam doloribus adipisci dolore, tempore. Quas repellat distinctio ullam autem quibusdam aspernatur, ipsum porro vero, magnam.</p>
  </section>
  <div class="copyright">&copy Website</div>
</section>

script.js

(function() {
  "use strict";
  
  var pages = [];
  var helpers = [];
  var rect = [];
  
  function init() {
    pages = document.getElementsByClassName("page");
    helpers = document.getElementsByClassName("helper");
   resize(); document.addEventListener("scroll",scroller);
    window.addEventListener("resize",resize);
  }
  
  function scroller() {
    var scr = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    for (var i = 0; i < pages.length; i++) {
      if (rect[i]*i < scr) {
        helpers[i].style.display = "block";
        pages[i].style.position = "fixed";
        console.log("Page "+i+" fixed");
        pages[i].style.top = "0";
       // pages[i].style.color = "green";
       // console.log(pages[i].classList);
      } else {
        helpers[i].style.display = "none";
        pages[i].style = "";
      }
    }
  }
  
  function resize() {
    for (var i = 0; i < pages.length; i++) {
      rect[i] = document.documentElement.clientHeight || window.innerHeight;
    }
    console.log("RESIZED");
  }
  
  document.addEventListener("DOMContentLoaded",init);
  
})();

scrolling-pages-chrome.markdown

Scrolling Pages (Chrome)

Pages that overlay each other as you scroll

A Pen by Charles Ojukwu on CodePen.

License.

style.scss

*,*:before,*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Hind", sans-serif;
  font-weight: 300;
}

$pad: 3rem;

.page {
  width: 100%;
  height: 100vh;
  //min-height: 600px;
  padding: $pad;
  position: relative;
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
  &:nth-of-type(odd) {
    background: #124;
    color: #eda;
  }
  &:nth-of-type(even) {
    background: #eef;
    color: #124;
  }
  img {
    width: 100%;
    height: auto;
  }
}

h2 {
  font-size: 2.4em;
}
h3 {
  font-size: 1.8em;
}
h2,h3{
  margin-top: 0;
  font-weight: 300;
  line-height: 1;
}

p {
  line-height: 1.6;
}

.helper {
  width: 100%;
  height: 100vh;
  position: relative;
  display: none;
}

.fixed {
  position: fixed;
}

.footer {
  $bg: desaturate(#124,50);
  background: $bg;//#556;
  color: #fff;
  position: relative;
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
  section {
    //height: 200px;
    min-height: calc(50vh - 60px);
    padding: $pad;
  }
  .copyright {
    padding: 0 $pad;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid lighten($bg,5);
    
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600" rel="stylesheet" />