Skip to content

README.md

Latest commit

 

History

History
38 lines (25 loc) · 1.14 KB

README.md

File metadata and controls

38 lines (25 loc) · 1.14 KB

StickyStack.js

A jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.

Check out the demo here:  http://codepen.io/mike-zarandona/full/Dasnw

 

Requirements

  • jQuery
  • A child-like sense of wonder

 

Usage

First include jQuery, then call .stickyStack() on the main content wrapper (or define it using options). Note that the stackingElements should be direct children of the containerElement.

	$('.main-content-wrapper').stickyStack();

 

Options

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

containerElement The selector which contains the elements to be stacked.

stackingElement The element(s) (which are direct children of containerElement) to be stacked on scroll.

boxShadow CSS property of the shadow applied to the first un-stuck stackingElement.

 

Credits

Made by Mike Zarandona with inspiration from Matthew Peach.