jQuery Plugin To Create Stacked One Page Scrolling Effect - Stackpage

Stackpage is a very small jQuery one page scroll plugin which enables you to scroll through a group of fixed page sections just like stacked cards.

See also:

• Minimalist jQuery Plugin For Scrolling Stack Of Pages - Scroll Deck
• jQuery Plugin For Stacked Page Scrolling Effect - jQuery Stacks

How to use it:

1. Split the whole webpage into several pages following the markup structure like this:

<div class="wrap">
  <div id="page-1" class="page">
    <div class="container">
      Content 1
    </div>
  </div>
  <div id="page-2" class="page">
    <div class="container">
      Content 2
    </div>
  </div>
  <div id="page-3" class="page">
    <div class="container">
      Content 3
    </div>
  </div>
</div>

2. Make the pages fixed positioned.

.sp-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

3. Put jQuery library and the jQuery Stackpage plugin's script in the webpage when needed.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.stackpage.js"></script>

4. Initialize the plugin and specify the parent container.

$(".page").stackpage({
  parent: '.wrap'
});

5. More default options.

$(".page").stackpage({
  wrapClass: 'sp-container',
  offsetTop: null,
});

---

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