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