Building a Sticky Sidebar with jQuery

I’ve got no clue as to when but at some point I reached a tipping point where I began writing more of my own JavaScript (well jQuery really) rather than taking the easy option and looking for a plugin.

There’s two reasons why I started to do this…

  1. Plugins have to deal with a lot of use-cases and so are often heavier. I need my websites to be as lightweight as possible
  2. Plugins don’t always fit to your exact requirements and so the plugin influences how you approach the problem

Stickiness

One such function I’ve been refining this week makes a sidebar element track with the scrollbar; making it appear sticky. I’ve used the basis for this function a couple of times before but each time I come to reuse it I’ve ended up scratching my head trying to figure it out again.

This time I wanted to simplify it, make it a little more reusable and also comment the code better.

Position:fixed is the simple way to fix something in relation to the browser window but often a website has headers and footers that you don’t want the fixed element overlapping. Also responsive design can add an additional complication; as it often does.

The Code

Below is the code needed to build the sidebar and get it all sticky, but for a working example go to our Google Penalty Recovery page.

What’s going on?

I’m hoping the comments within the code are enough to explain what’s going on rather that covering each line in detail. But as an overview the code has to do a few things:

  1. Run on load, scroll and resize – remember we’re responsive
  2. Look to a sibling (the main content area) for guidance as to when to start being sticky and when to stop
  3. Only move if the window is larger than the height of the element we want to fix
  4. Determine if the website is in a two column layout

For the last of that list we determine a two column layout on whether or not an element is using the CSS float property. We could use Media.match to specify an exact screen size but that leads to repetition and extra overhead if changes are made to the breakpoint used at a later time.

Go Play

Feel free to go and use the code in your own website, it’s not a one size fits all solution and there’s changes you’ll have to make to suit your own requirements. For example you’ll need to tweak it if you want the element to appear fixed to the bottom of the window rather than the top. But if you’ve got a question, or an idea to improve the code add a comment below.

Right now I’m just happy it works and it’s a lot less code than similar plugins.

Image courtesy of Gabriel Toro

Be the first!

Back to Top