Parallax Scrolling Made Easy With StickyStack.js

By Jake Rocheleau. in Toolkit. Updated on June 29, 2020.

Parallax effects grab attention fast. These effects keep certain backgrounds in view while scrolling down the page. You’ll find parallax scrolling on many websites and WordPress themes and they’re a large part of modern web design.

You can also build a unique parallax style using the StickyStack.js plugin. It’s built on jQuery and keeps each main page section stickied to the top as you scroll down.

This creates the illusion of a layered website where each page “stacks” on top of the other. It’s really cool and pretty easy to set up on your own.

While it’s pretty easy to set up, it does require some understanding of frontend development.

You need to first create individual page sections inside the main container. This way you’ll have everything enclosed in the HTML, so you can target everything with the StickyStack jQuery function.

It also comes with a few options where you can customize the parent container, the elements that should stack, and a possible box shadow if you like that effect.

Here’s a sample bit of code from the GitHub page:

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

While this hasn’t been updated in about two years, it’s still a very reliable plugin. It worked in all the browsers I tested (Chrome, Safari, & Firefox) with support for all versions of jQuery.

Plus, the minified file is only 2KB which is a decent size for a plugin.

To learn more, visit the main repo and see what StickyStack can offer. I think it works best on single-page websites or landing pages with large fullscreen backgrounds.

You can also check out a live demo on CodePen if you wanna see how this looks on a live site.