Skip to content

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

Notifications You must be signed in to change notification settings

mike-zarandona/StickyStack.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

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.

 

StickyStack.js in the Wild

Have you used StickyStack.js on a project or site? I'd love to see it! Send me an email.

 

Credits

Made by Mike Zarandona with inspiration from Matthew Peach.