Stacked One Page Slider with jQuery StickyStack.js
File Size: | 6.07 KB |
---|---|
Views Total: | 3977 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.