Here is our take on news, art, ideas, technology, the web, and things we like - join the discussion and don't forget to subscribe to the RSS feed.

stickysidebar

   Zoran Perin

Sticky Sidebar

A few days ago, we were stuck with a seemingly simple client request: Convert an ordinary (read: boring) sidebar into a “sticky” one. After a few failed attempts and initial ideas, we discovered that we were dealing with more than just a stubborn old sidebar that had to be fixed in position to do the job.

The key problem was this: Sidebars have different heights, from one page to another and content on these pages is similarly different. We rolled up our sleeves (we really did) and duked it out with Javascript. It was a close match, but we came out as the victor. And, we are willing to share our latest breakthrough, since we believe that everyone may need this at some point. You’re welcome!

Watch the DEMO or DOWNLOAD the plugin.

Installation guide:

There are few of things you must have:

1. jQuery core
2. Sticky Sidebar JS
3. Some lines in CSS

Start by including jQuery core in your page:

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

Next, include the Sticky Sidebar JS after the jQuery core:

<script src="js/stickySidebar.js"></script>

Nice job; that’s a darn good start, you. Now, roll on to real deal below.

Initialization

$(document).ready(function() {

    $('#sidebar').stickySidebar();

});

Options

You can, optionally, change and pass some parameters by doing the following:

$('#sidebar').stickySidebar({

    sidebarTopMargin: 20,
    footerThreshold: 100

});

The full list of available parameters to change:

headerSelector – defines header section (‘header’ by default)
navSelector – defines navigation (‘nav’ by default)
contentSelector – defines content section (‘#content’ by default)
footerSelector – defines footer section (‘footer’ by default)
sidebarTopMargin – defines top margin from sidebar to navigation element (20px by default)
footerThreshold – defines a distance from footer (40px by default)

Conclusion

So, kids, what you get is a plain and simple sticky sidebar that can handle unique cases that are not covered by most “sticky sidebar” solutions.

Enjoy!

  1. Did you checked out “Huge sidebar” demo ?
    In any case, it’s an excellent and efficient plugin, keep up with good work ;)

    Comment by w00w00

  2. Of course I did! It is there with purpose, to show that sidebar won’t be sticky in a case that its height is bigger than height of the window. In that situation there’s no point in having it sticky, right?

    Thanx for comment!

    Comment by Zoran Perin

  3. What’s about huge sidebar? Don’t stick in demo. Is this feature or bug? Having the same issue when sidebar height is bigger than window height but smaller then content height

    Comment by Alex Beep

  4. Hi Alex! Please read comment above and that will explain your question. Thanx !

    Comment by Zoran Perin

  5. Hi, How can I change the aside element float to right, instead of float left. And #content will be change float to left.
    I has change in the style.css file, but not work. Can you help me!
    Many thanks!

    Comment by Justin911

  6. you noted that you need a few lines of CSS. Just this?
    #sidebar.sticky { float: none; position: fixed; top: 20px; z-index: 6; left: auto; }

    thx.

    Comment by Michael Ware

  7. Hi guys. Great little plugin! It’s working almost perfectly for me, only issue is it doesn’t seem to be recognising my footer div and my sidebar isn’t stopping at the top of the footer. Any ideas?

    Comment by Jeremy

  8. guys, I think you forget to write this
    .sticky { float: none; position: fixed; top: 20px; z-index: 6; left: auto; }

    we have to insert that in our css, and dont forget make a aside tag or element that we want to make it stiky become float:left,

    you have not informed that on your tutorial,
    thanks

    Comment by rismunandar

  9. @rismunandar : Hi! I don’t see the need for adding this, this is added with JS when needed.

    Comment by Zoran Perin

  10. I can’t make it work to float right, not left. Why is that? What CSS or JS I need?

    Comment by leone510es

  11. If you have “position” set to something else than “static” the sticky element will be out of whack because the current version of the plugin (20 Mar 2014) does not remove the inline style when the element becomes unstuck.

    To fix this, edit the code as follows:

    Change

    sidebarSelector.removeClass(‘sticky’);

    to

    sidebarSelector.removeClass(‘sticky’).css(‘top’, ”);

    Comment by Jens

  12. Is there any way to load this on jquery 1.6.4?

    Because it conflicts when I add another jquery version.. My mobile version will not work if I add another version of jquery.

    I dont want to add another jquery version.

    Please help. Thanks!

    Comment by shufflemix

  13. Is there an easy way to get this bar to the right?
    Thanks!

    Comment by Gizmo

  14. I see a terrify effect in Sticky Sidebar demo when navigator window is small than side bar. Some times scroll out or over the elements and some times it use fixed position.

    Comment by Ricardo

  15. @Ricardo: demo (plugin) is not meant to be responsive. Its purpose is just to show some basic static sidebar funcionality. I guess that version 2.0 will include responsive. Thanx for comment!

    @Gizmo: expect that soon in version 2.0 ;)

    @shufflemix: unfortunately, I won’t work out to find solution for older jQuery. The progress should look towards the future, not past, right?

    Thanx all for comments, you are amazing! :)

    @Jens: thanx! I will look at that at version 2.0

    Comment by Zoran Perin

Leave a Reply

Your email address will not be published. Required fields are marked *