jQuery plugin for making an element fixed when it goes out of view.
See demo.html for an example.
- detecting when an element goes out of view and making it fixed
- replacing the element with an invisible clone that will temporarily occupy the original spot
- updating size and position of the fixed element
Tested in Mozilla Firefox, Google Chrome, Safari, Opera and MSIE 7+
The plugin provides a single jQuery method you can use:
- element - element that will be fixed
- options - object with various settings (see list below)
Returns: an instance of Shira.ScrollFix.Watcher or false if no element was given / matched.
| Name | Default | Description |
|---|---|---|
| fixClass | "scroll-fix" | Class added to the element when it is fixed. |
| fixTop | 0 | Top offset of the fixed element. |
| fixOffset | 0 | Offset aplied when detecting whether to fix the element. |
| unfixOffset | 0 | Offset aplied when detecting whether to unfix the element. |
| syncSize | true | Update element's size when it is fixed. |
| syncPosition | true | Update element's position when it is fixed. |
| style | true | Apply position: fixed and top: ..px directly to the element when it is fixed. Disable this if you wish to style the element through your own CSS rules using the fixClass (example: #myElement.scroll-fix {position: fixed;}). |
| onUpdateFixed | null | Custom function to call when the fixed element is updated. The function is passed an instance of Shira.ScrollFix.Watcher. |