hcSticky – jQuery Floating Sticky Plugin

hcSticky is a cross-browser jQuery plugin that makes any element on your page float.

It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of a empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

It is designed to be flexible, but very easy to use. hcSticky applied to a content makes it fixed on the page and always visible no matter how high the page is, or how high the sticky content is. Its packed with many interesting features in case you need them.

hcSticky is compatible with all modern web browsers. It requires jQuery 1.7.1or later to work properly.

Overview

While searching for this kind of plugin I've found none that has all the features I needed. The most important of all, I needed for the sticky element to continue scrolling down if it is bigger than the document itself, until it reaches its end. Then for example if I have some Adds in my sidebar, I needed the ability to specify an inside element that I want sticky to stop at, instead of stopping at containers top.

hcSticky has two modes of working:

  • Inside of content, referring to it
  • Referring to the Document

hcSticky working modes

When ran in the first mode, parent element of sticky content acts like its holder. Your sticky content will follow the page until the bottom of it reaches bottom of its parent element, and then it will stop. The same is when you scroll up. Its ideal for sidebars.

In the second mode, sticky content is referred to a Document top and bottom, ignoring any element before or after. Ideal for menus.

Options

You can set additional options, like distance from top or bottom when to start or stop floating, or even inside element of your sticky content that you want to be top starting point. Great when you have some important widget inside your sidebar that you want to signify.

Option KeyDefault ValueDescription
top 0 The distance from the top of the Window at which to trigger hcSticky.
bottom 0 The distance from the bottom of the Window at which to glue hcSticky.
bottomEnd 0 The distance from the bottom of the referring element at which to stop hcSticky.
bottomLimiter null jQuery selector that selects element and calculates bottomEnd value based on its offset top position. It works only if noContainer is set to "true" and it has higher priority than BottomEnd.
innerTop 0 The distance from the top inside of the sticky content at which to trigger hcSticky.
innerSticker null jQuery selector that selects element at which to trigger hcSticky instead of top of sticky container. This has higher priority than innerTop option.
noContainer false When set to "true", hcSticky will be referred to the Document.
followScroll true When set to "false", sticky content will not move with the page if it is bigger that Window.
className 'sticky' Class that will be applied to sticky container while it is floating.
wrapperClassName 'wrapper-sticky' Class that is set to wrapper that hcSticky creates around your sticky content.

How to use

Include jquery.hcsticky.js after jQuery, like any other jQuery plugin.

<!-- jQuery -->
					<script type="text/javascript" src="jquery.js"></script>

					<!-- hcSticky script -->
					<script type="text/javascript" src="jquery.hcsticky.js"></script>
				

The hcStickymethod is called on the selector for which you want to float on the page. For example:

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

That way you load all default options. If you want to set any of them, pass them to hcStickymethod like this:

$('#sidebar').hcSticky({
					top: 50,
					bottomEnd: 100,
					wrapperClassName: 'sidebar-sticky'
				});

Be sure to run it after DOM has been loaded.

You can change your settings at any time, just pass new values to your element like described above. Don't worry about other options you set at first, hcSticky will update only newly set values.

Methods

It also has some additional methods you can use:

reinit

If you have done something to the layout or changed dimensions of your sticky content, you can update hcSticky. It will destroy itself and initialize itself again, with all initially set options.

$('#sidebar').hcSticky('reinit');

Do not reinit hcSticky on Window resize, it already has built-in function for that! Reinit it only if you've updated its content or changed its dimensions.

off/on

If you want for some reason, you can turn your sticky off and back on.

$('#sidebar').hcSticky('off');

How does it work

When called, hcSticky first wraps your element with a <div> element, copying necessary styles from your element (width, height, float, left, right, top, bottom...). Wrapper acts as a substitution for your element, that way preserving your layout. Once your sticky content touches top limit, its position becomes fixed, and stays like that until you scroll down to bottom limit.

And how that works, I really don't know. Theres some sick math behind all that, I had many sleepless nights because of it.

You can also get the unminified version if yu want to see the sourcecode

To do

Callback functions onStart, onStop...

Soon on GitHub

hcSticky is © 2012 by Some Web Media and licensed under the MIT license.