What is it?

For a project I was working on, I wanted to create a simple feature: as the user scrolls down the page, I wanted the heading for that section to follow the user. Partly so that navigation could follow the user, and partly to remind the user where they were. When getting the user to the next section, the headers needed to change, and a new header follow the user. I pretty much wanted to re-create the effect that headers do on iOS applications, such as contents or playlists.

So, I had a look around to see if there was anything around that would help me do this. There were plenty of tutorials for creating a similar effect. Bootstrap has the affix option, but nothing seemed to be exactly what I wanted. I not only wanted an element to follow a user, I wanted an element to follow the user, and then delegate the behaviour to another element.

So, I put together my solution, and then just continued to play with it. After realising that I could use the solution on multiple projects, I decided to create a jQuery plugin from it. I then thought other people would enjoy it, so I have opened it up to you all.

How it works

The concept behind stacks is simply to apply different css classes to an element dependant on its scroll position on the screen. For a working example, just, erm, look up.

Normal state

As you scroll down a webpage, an element keeps its normal styling and css properties, just minding its own business.

Top state

When the specified element hits the top of the viewport, a fixed class is applied to the element. The styling and properties are up to you, Stacks just helps with dynamically setting the class.

Bottom state

Once the element hits the bottom of its parent container, Stacks applies an absolute class, so that you can tie the element to the bottom of its parent.

How to use it

Stacks aims to be really simple to use, and requires just a few options, plus some minimal skeleton css classes:

First step, get a copy of jquery 1.7.0+ and include stacks in your page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> </script>
<script src="jquery.stacks.js"></script>

Once you're happy with that, you can make a start on configuring stacks. Below is an example setup:

$(function(){
	$('body').stacks({
		body: '.contentblock',
		title: 'h1',
		offset: 0,
		margin: 0
	})
})

Along with this, you will have to set up some basic css - one rule for the parent container, one for the fixed element, and one for the absolute element, a lá

.your-parent-container{position: relative;}
.fixed{position: fixed; top: 0; z-index: 5;}
.absolute{position: absolute; bottom: 0;}

So, there are a few options available to you (4, to be precise):

  • body: This is the container that will house your floating element. Each floating element will need its own parent container, whether its a div or a section or whatever
  • title: The identifier for the elements you want to be fixed, can be any type of jQuery selector
  • margin: More often then not you will have some kind of padding at the bottom of your body container. Set this value to whatever the padding/margin is and this will ensure that the fixed element will scroll down as far as possible. You will also need to change your css for the .absolute class to reflect this, so if you padding at the bottom is 20px, then add a bottom: -20px; rule to this class.
  • offset: Sometimes, you may have another fixed element above the flow of your parent container(s), or you just want to have a bit of a margin at the top of your elements. Set this value to any top offset you might have. Again, you will have to account for this in your css for the .fixed, just setting the top to whatever value you put in here.

See some examples

This page shows stacks in action, but there can be some more uses for it, which I will put together soon.

Go get it

Stacks is freely available to everyone, and can be found on GitHub, or can be downloaded in a zip file, containing the uncompressed code, the minified version, and a basic sample page containing some ace Simpsons quotes.