5 Sticky Sidebar Plugins (Menus) Built with jQuery

I can honestly admit that there have been times where I have spent days on fixing one thing for my blog, and not in terms of code, but in terms of design and how good something looks. Over the course of webs evolution, ‘sticky stuff’ has become pretty popular.

If you take a look to the left side of this page, you’ll notice that I’ve got sticky social buttons there – scroll a little bit lower in case you don’t see them – and it’s honestly one of the most important features to me, as I want to make sharing easy and effective for my readers.

They’re jQuery based, and was a gift for helping out with a community of a very popular blogger, who’s name I won’t mention – in case everyone decides to bombard him about this script. I’ve seen it on few websites, but honestly – there are better alternatives out there, free of charge.

But, we can look at it in any way we like, having a floating / sticky menu can sometimes prove to be really helpful, and even rewarding. On the right hand side I’ve got a Facebook widget, that’s also ‘sticky’ and scrolls along with the user. I’ve done some A/B tests and I can openly say that the CTR rate has increased drastically.

1. jQuerySideBar

jQuery SideBar jQuery Plugins
Incredibly easy to setup, but might not be so forgiving to those who’re new to CSS, as the default style might not be as appealing. There are however, plenty of comments on the official site – with examples of how to style the sidebars.

$("#sidebar").sidebar({
position : "right",
top : 0 
});

Quite easy to call, and I’m quite sure it might not be as hard to implement in WordPress as it may first seem.

2. stickyMojo

stickyMojo contained fixed position sticky sidebar jquery plugin

I really like stickyMojo, because it takes away the need to do custom styling. You can see in the snapshot above how the default design looks, and I think it’s perfect for any website. If anything, you can just change up the colors within the stylesheet.

$(document).ready(function(){
    $('#yoursidebar').stickyMojo({footerID: '#yourfooter', contentID: '#yourmainarea'});
});

Incredibly easy to call, but do go over the main documentation to grasp it better, these things can get really tricky. I think you’ll love how lightweight this sticky sidebar plugin is, so give it a go.

3. jQuery-stickit

jQuery stickit
Very traditional, no extra features – just straight to the point. Really like that it is compatible with things like header menus, and navbars. But, the important thing to know is that it’s extremely easy to use.

$('.stickit').stickit({
  // Sets the element stick in the parent element or entire document.
  scope: StickScope.Parent,

  // Sets the class name to the element when it's stick.
  className: 'stick',

  // Sets sticky top, eg. it will be stuck at position top 50 if you set 50.
  top: 0,

  // Sets extra height for parent element, it could be used only StickScope.Parent. When the contents of parent has margin or something let the actual height out of container, you could use this options to fix.
  extraHeight: 0
});

try it out before you commit, the official demo has all three samples available.

4. Zebra_Pin

Zebra_Pin examples
Love the name of this plugin, heh. It’s a great plugin, because it comes automatically integrated with features like mobile support, and not to mention how lightweight it is, something like ~2KB when minified.

You can pin things to previous elements, and make it easy to overlap certain parts of the page, complete control of when each of the elements become sticky, etc,.

Note that this plugin will alter the target element(s) “position” property to “absolute” and/or “fixed”, depending on the situation, so before calling the plugin make sure that this change will not affect your page’s layout.

5. Theia Sticky Sidebar

iviucmg theia sticky sidebar blob master examples 3 columns.html
The last plugin on our list, has the functionality you’d expect, with the choice of having a different style. I’m the kind of person who likes bubbly stuff, so this plugin is perfect. It does make me sad that there aren’t more of these available for WordPress users.

Sticky HTML Elements With jQuery

Good list, I think I’ll stick with Mojo as being my favorite one, though Theia is also looking quite good, especially if thinking in terms of personal pages.

Any of these ring a bell for you?

cover by Asif