hc-sticky

HC-Sticky

v.1.2.43

Cross-browser jQuery plugin that makes any element attached to the page and always visible while you scroll.

##Call the plugin

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.hc-sticky.js"></script>
<script>
	jQuery(document).ready(function($){
		$('#element').hcSticky();
	});
</script>

Options and callbacks

Options can be updated at any time by calling the plugin again.

Example:

$('#element').hcSticky({
	top: 50
});

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).

Commands

Commands are used to control the plugin after initialization.

Example:

$('#element').hcSticky('stop');

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.
destroy	Completely destroys sticky and reverts element to original state.