Skip to content

Latest commit

 

History

History
161 lines (145 loc) · 4.13 KB

README.md

File metadata and controls

161 lines (145 loc) · 4.13 KB
Raw

HC-Sticky

Node.js version of jQuery HC-Sticky plug-in.

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 Turns 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.
resize Resize the sticky element. Useful if you don’t want to send a global resize event which results in an expensive redraw.
destroy Completely destroys sticky and reverts element to original state.