Java Script Hack : Adding Cards like Stack effect to Web Pages

Stacking effect became popular when it was introduced in Android 4.0 for the apps list in the launcher. Each screen in the apps list came one below the other. Such an effect is called as stacking.

Consider a web page which has a lot of contents in it. Its very hard and old fashioned to use the usual simple scrolling effect. In order to make life interesting, JavaScript came in and also a huge collection of JS code was introduced.


One such small package is the Sticky Stack by Mike Zarandona which lets you readily turn your existing web pages into ones with stacking of content.


JQuery is the only pre-requisites for using this effect which is available at

Once the JQuery is right in place and linked to the site, the layout of website needs to be split into sections under the div as follows.

The main div contains a class “main-content-wrapper” which is used to initialize the stacking operation.
The StickyStack.Js plugin is imported to your HTML document which is available in the author’s Github Repo or via the direct link.

Once the Plugin is added, we only need to initialize it to get it working. to initialize,


By default, the stacking element is the sections tag, which can be altered by the use of options in StickyStack.

containerElement: '.content-div',
stackingElement: 'div',
boxShadow: ''0 -3px 20px rgba(0, 0, 0, 0.25)'

I can even use div instead of sections, by altering the options. This provides a lot of flexibility and simplicity to creating beautiful effects.

Varun is a Software Developer by profession and blogger by passion. He likes to talk about technology and things on the internet that makes life easy.
Bookmark and Share