HC-Sticky 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. HC-Sticky 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.

HC-Sticky is compatible with all modern web browsers, including IE7, IE8. It requires jQuery 1.7.1or later to work properly (new version of the plugin not tested).

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.

HC-Sticky has three modes of working:

  • Referring to its container
  • Referring to any given element
  • Referring to the Document

hcSticky working modes

When ran in the first mode, parent element of sticky content acts like its container. 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.

The second mode is same as the first, except instead of a container sticky uses elements you gave him as its referrer for height. 

In the third mode, sticky content is referred to a Document top and bottom, ignoring any element before or after. Ideal for top 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.

Property Default Type Description
top 0 int The distance from the top of the Window at which to trigger HC-Sticky.
bottom 0 int The distance from the bottom of the Window at which to glue HC-Sticky.
innerTop 0 int The distance from the top inside of the sticky content at which to trigger HC-Sticky.
innerSticker null jQuery selector Element at which to trigger HC-Sticky instead of top of sticky container. This has higher priority than innerTop option.
bottomEnd 0 int The distance from the bottom of the referring element at which to stop HC-Sticky.
stickTo null jQuery selector / jQuery object Element that represents the reference for height instead of height of the container. Usedocument for top menus.
responsive true boolean When set to true, HC-Sticky will recalculate its dimensions and position on resize.
offResolutions null int / array Set resolutions at which HC-Sticky will turn itself off. If integer is negative, it will turn off below given resolution, if positive it will turn off above it. Example: [-780, 1600]
followScroll true boolean When set to false, sticky content will not move with the page if it is bigger that Window.
className “sticky” string HTML class that will be applied to sticky element while it is floating.
wrapperClassName “wrapper-sticky” string HTML class that is set to wrapper that HC-Sticky creates around your sticky element.
onStart false function Callback function on plugin Start event (when the element starts floating).
onStop false function Callback function on plugin Stop event (when the element stops floating and returns to its normal state).

How to use

Include jquery.hc-sticky.js after jQuery, like any other jQuery plugin.

<!-- jQuery -->
<script src="path/to/jquery.js"></script>

<!-- HC-Sticky script -->
<script src="path/to/jquery.hc-sticky.js"></script>

The .hcSticky() method 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 sticky like this:

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

Be sure to run it after DOM has been loaded.

jQuery(document).ready(function($){
    $('#element').hcSticky();
});

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, sticky will update only newly set values.

Commands

It also has some additional commands you can use. Example:

$('#sidebar').hcSticky('off');
Command Description
stop Stops the sticky while preserving its current position.
off Turnes off the sticky completely.
on Turns the sticky back on after above two commands.
reinit Recalculates sticky size. Useful after altering DOM elements inside sticky.

Do not reinit sticky on Window resize, if responsive options is turned on it will do it automatically. Reinit it only if you’ve updated its content or changed its dimensions.

How does it work

When called, HC-Sticky 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.

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

 

We hope that you find this plugin useful. If you notice any bugs, or have some suggestions about it, please feel free to write below in the comments.

HC-Sticky is © 2012 by Some Web Media and licensed under the MIT license.