Get new jQuery plugins just once a week

×

StickyStack-js

FavoriteLoadingAdd to favorites

August 1, 2015

StickyStack-js | jQuery plugin that creates a stacking effect

StickyStack-js is a jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.

Created by Mike Zarandona

Download

Example

StickyStack-js jQuery plugin

stacking effect

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

 

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.

StickyStack-js

Related posts:

Select
SocialCount
Huge On Facebook
StickyStack-js jQuery plugin

http://jquer.in/wp-content/uploads/2015/07/StickyStack-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever