Stacked One Page Slider with jQuery StickyStack.js

File Size: 6.07 KB
Views Total: 3941
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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 id="one">
  ... Section 2 ...

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


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


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.


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:


  • bugfix


  • 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.