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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent