twitter facebook dribbble email

A Simple Sticky Sidebar

Careful! This post is looking a little old and could be inaccurate in many, many ways

It’s annoying sometimes how simple a solution can be after having previously spent hours trying to solve a problem with nothing to show for it.

I’d spent hours trying to get a sticky/floating sidebar to work on a client website but everything I tried didn’t work. The problem was I was using a plugin that simply wasn’t built to suit the specific requirement’s of the site. This is nothing new as with any plugin you have to fore go some amount of customisation unless you’re willing to dive into the code of the plugin.

After too long I gave up with the plugin and have tried a couple of others but all of these had issues either with dealing with responsive layouts or in stopping the sidebar fro floating as it collided with the footer.

I had to give in and write the code myself. Not only did this not take too long but the code is much shorter than many of the plugins I found; though this is probably down to a lack of flexibility in my solution.

It also needs the following CSS within a media query if you want the sidebar to stop floating at certain breakpoints.

Feel free to use and improve. If you notice any glaring issues, let me know.