https://github.com/garand/sticky
jQuery Plugin for Sticky Objects
https://github.com/garand/sticky
Last synced: 5 months ago
JSON representation
jQuery Plugin for Sticky Objects
- Host: GitHub
- URL: https://github.com/garand/sticky
- Owner: garand
- License: other
- Archived: true
- Created: 2011-02-14T05:36:09.000Z (about 15 years ago)
- Default Branch: master
- Last Pushed: 2019-11-13T13:09:12.000Z (over 6 years ago)
- Last Synced: 2025-09-24T23:38:35.870Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 598 KB
- Stars: 3,282
- Watchers: 102
- Forks: 1,043
- Open Issues: 173
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-frontend - sticky - jQuery Plugin for Sticky Objects
- my-awesome-list - sticky - jQuery Plugin for Sticky Objects (Programming Languages / JavaScript)
- awesome-frontend - sticky - jQuery Plugin for Sticky Objects
- awesome-front-end - sticky - jQuery Plugin for Sticky Objects
README
# Sticky
Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.
## Sticky in brief
This is how it works:
- When the target element is about to be hidden, the plugin will add the class `className` to it (and to a wrapper added as its parent), set it to `position: fixed` and calculate its new `top`, based on the element's height, the page height and the `topSpacing` and `bottomSpacing` options.
- That's it.
In some cases you might need to set a fixed width to your element when it is "sticked".
But by default (`widthFromWrapper == true`) sticky updates elements's width to the wrapper's width.
Check the `example-*.html` files for some examples.
## Usage
- Include jQuery & Sticky.
- Call Sticky.
```html
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
```
- Edit your css to position the elements (check the examples in `example-*.html`).
- To unstick an object
```html
$("#sticker").unstick();
```
## Options
- `topSpacing`: (default: `0`) Pixels between the page top and the element's top.
- `bottomSpacing`: (default: `0`) Pixels between the page bottom and the element's bottom.
- `className`: (default: `'is-sticky'`) CSS class added to the element's wrapper when "sticked".
- `wrapperClassName`: (default: `'sticky-wrapper'`) CSS class added to the wrapper.
- `center`: (default: `false`) Boolean determining whether the sticky element should be horizontally centered in the page.
- `getWidthFrom`: (default: `''`) Selector of element referenced to set fixed width of "sticky" element.
- `widthFromWrapper`: (default: `true`) Boolean determining whether width of the "sticky" element should be updated to match the wrapper's width. Wrapper is a placeholder for "sticky" element while it is fixed (out of static elements flow), and its width depends on the context and CSS rules. Works only as long `getWidthForm` isn't set.
- `responsiveWidth`: (default: `false`) Boolean determining whether widths will be recalculated on window resize (using getWidthfrom).
- `zIndex`: (default: `inherit`) controls z-index of the sticked element.
## Methods
- `sticky(options)`: Initializer. `options` is optional.
- `sticky('update')`: Recalculates the element's position.
## Events
- `sticky-start`: When the element becomes sticky.
- `sticky-end`: When the element returns to its original location
- `sticky-update`: When the element is sticked but position must be updated for constraints reasons
- `sticky-bottom-reached`: When the element reached the bottom space limit
- `sticky-bottom-unreached`: When the element unreached the bottom space limit
To subscribe to events use jquery:
```html
$('#sticker').on('sticky-start', function() { console.log("Started"); });
$('#sticker').on('sticky-end', function() { console.log("Ended"); });
$('#sticker').on('sticky-update', function() { console.log("Update"); });
$('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
$('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
```