Vertical Stacked Pages on Materialize

One-page with multiple stacked sections that reveal on scroll

The inspiration for this snippet I got when I discovered the beautiful portfolio work of Claudio Guglieri

I love the way the fixed page sections underneath reveal themselves as the current overlay page scrolls away.

After a little trial-and-error at Codeply, seemingly the best approach was a series of `position:absolute DIVs with a trailing dummy DIV at the end.

The last “dummy” DIV at the bottom allows the page to be scrolled. If you stack a bunch of full screen (100% width/height)`absolute` DIVs over each other the browser doesn’t need to scroll. The last DIV forces the browser to scroll, but it also must be full height. This last DIV also acts as a landing footer for the user to realize, “hey, I reached bottom!”.

I used Materialize for the colors and responsiveness, but you can use any framework (ie: Bootstrap, Foundation, etc..), or none for that matter since it only requires CSS and jQuery.

You’ll see the `min-height` instead of `height` is used on the BODY and `.page` class so that any give page can be taller than the viewport.

Try the demo.

HTML

<main class=”container”>
  <div class=”pages”>
    <div class=”page active”>
     -- first page
    </div>
    <div class=”page fixed”>
     -- second page
    </div>
    <div class=”page”>
     -- more pages..
    </div>
  </div>
</main>
<div class=”footer">
  --footer content
</div>

CSS

html,
body {
  min-height: 100vh;
}
main.container {
  width: 100%;
  max-width: 100%;
}
.pages {
  position: relative;
  width: 100%;
  z-index: 0;
}
.page {
  padding: 4.5em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  visibility: hidden;
  z-index: 1;
}
.page.prev {
  visibility: visible;
  position: static;
  z-index: 1;
}
.page.active {
  visibility: visible;
  position:relative;
  z-index: 3;
}
.page.fixed {
  visibility: visible;
  position: fixed;
  z-index: 2;
}
.footer {
  width: 100%;
  min-height: 101vh; /* slighlty bigger to force scroll! */
}
.footer > .row {
  margin-bottom:0;
}

JavaScript

This code is currently done in jQuery (which could also be implemented in pure JavaScript) and is used to..

• Determine when the “current” (active) page has reached a viewport boundary.
• Determine if the user is scrolling up or down.
• Set the current page to “active”, the next page to “fixed”, and the prev page to “static”.

$(document).ready(function(){
 var lastScrollTop = 0;
 var selector = “.page”;
 $(window).scroll(function() {
 
 var curr = $(‘.active:not(“.wait”)’);
 var next, prev;
 
 if (curr.length !== 0) {
   next = curr.next();
   prev = curr.prev();
 }
 
 var st = $(this).scrollTop();
 if (st > lastScrollTop){
 
   // downscroll code
   if (typeof next!=”undefined” && atBottom(curr[0])) {
     changeActivePageDown(curr,next);
   }
   else {
     curr.removeClass(“fixed”);
   }
 
 }
 else {
 
   // upscroll code
   if (curr.index()===0){
     // already at top of first page
     return;
   }
 
   if (typeof curr != “undefined” && typeof prev != “undefined”) { 
     if (atTop(curr[0])) {
       changeActivePageUp(curr,prev,next);
      }
 
   }
   else {
 
      var last = $(selector).last();
      if (atTop(last[0])) {
         last.prev().addClass(“wait”).addClass(“active”);
         last.removeClass(“prev”).addClass(“fixed”);
         last.prev().removeClass(“prev”).removeClass(“wait”);
      }
   }
 }//end lastScrollTop changed
 
 lastScrollTop = st;
 return;
 });
});

Here are the helper functions used to change the active page by switching CSS classes..

function changeActivePageDown(curr,next) {
  curr.removeClass(“active”).addClass(“prev”);
  next.addClass(“active”).addClass(“wait”).removeClass(“fixed”);
  next.next().addClass(“fixed”);
  next.removeClass(“wait”);
}
function changeActivePageUp(curr,prev,next) {
  prev.addClass(“active”).addClass(“wait”).removeClass(“prev”);
  next.removeClass(“fixed”);
  curr.removeClass(“active”).addClass(“fixed”);
  prev.removeClass(“wait”);
}

And, the helper functions used to determine when the position is at the bottom or top of a page section..

function atBottom(ele) {
 if (ele.getBoundingClientRect().bottom <= 0) {
   return true;
 }
 return false;
}
function atTop(ele) {
 if (ele.getBoundingClientRect().top >= 0) {
   return true;
 }
 return false;
}

AngularJs is used on the demo site to fetch some random user data, and build the pages dynamically. Theoretically, it would be easy to switch the jQuery logic above as a Angular directive so I may investigate that later.

That’s it!

I hope you find this helpful, and let me know you’re comments & questions.

Try the demo, or grab the source code.