Stacked One Page Slider with jQuery StickyStack.js

StickyStack.js is a very lightweight jQuery plugin for creating a page slider which allows you to scroll through a set of sections that will stack on top of each other. Similar to the one page scrolling or parallax scrolling effects.

Basic Usage:

1. Include the latest version of jQuery library and the jQuery stickystack.js at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.stickystack.js"></script> 

2. Create a set of sections that will stack when you scroll past them.

<div class="wrapper"> 

  <section id="one">
  ... Section 1 ...
  </section>
  
  <section id="one">
  ... Section 2 ...
  </section>

  <section id="one">
  ... Section 3 ...
  </section>

  ...

  <section id="one">
  ... Section n ...
  </section>

</div>

3. Expand the sections vertically depending on the height of the user's browser window.

$('section').css('height', $(window).height());

4. Call the plugin on the wrapper and you're done.

$('.wrapper').stickyStack();

5. The default settings.

$.fn.stickyStack.options = {
  containerElement:	'.main-content-wrapper',
  stackingElement:	'section',
  boxShadow:  '0 -3px 20px rgba(0, 0, 0, 0.25)'
};

6. Style the page and sections in the CSS whatever you want.

Change log:

2015-10-11

• bugfix

2014-06-25

• Added a fix for sections that are taller than the viewport

---

This awesome jQuery plugin is developed by mike-zarandona. For more Advanced Usages, please check the demo page or visit the official website.