https://github.com/filamentgroup/fixed-sticky
DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.
https://github.com/filamentgroup/fixed-sticky
polyfill scrolling sticky
Last synced: 8 months ago
JSON representation
DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.
- Host: GitHub
- URL: https://github.com/filamentgroup/fixed-sticky
- Owner: filamentgroup
- License: mit
- Archived: true
- Created: 2013-10-04T22:39:30.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2017-06-28T15:33:56.000Z (almost 9 years ago)
- Last Synced: 2025-09-12T09:50:14.181Z (9 months ago)
- Topics: polyfill, scrolling, sticky
- Language: JavaScript
- Homepage:
- Size: 658 KB
- Stars: 1,481
- Watchers: 46
- Forks: 149
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-css - Fixed-sticky - A CSS position:sticky polyfill. (CSS Polyfills / Editor's Draft :black_nib:)
- awesome-css - Fixed-sticky - A CSS position:sticky polyfill. (CSS Polyfills / Editor's Draft :black_nib:)
README
# Fixed-sticky
## 🚨🚨 This plugin is Deprecated 🚨🚨
In our own designs we use sticky sparingly and as an enhancement, which means that fallback positioning behavior is acceptable. With [native browser support for `position: sticky`](http://caniuse.com/#feat=css-sticky) expanding, we must weigh the diminishing cross-section of browsers that require this polyfill against this plugin’s own maintenance costs. Therefore, we’ve decided that now is the right time to retire `fixed-sticky`. The [previous documentation can be found at v0.1.7](https://github.com/filamentgroup/fixed-sticky/tree/cd752571b89d0dcc0d2783feb8dda43cf4ff259d). NPM will report a deprecation warning. If you want to maintain a fork of this package, send me a message ([@zachleat on Twitter](https://twitter.com/zachleat)) and I’ll add a link to it below. **Thank you!**
[ ](http://www.filamentgroup.com/)
- ©2013 [@zachleat](https://github.com/zachleat), Filament Group
- MIT license
### Great alternatives
* [Stickybits](https://github.com/dollarshaveclub/stickybits) from Dollar Shave Club and [Jeff Wainwright](https://twitter.com/yowainwright)
## Native position: sticky
The most overlooked thing about `position: sticky` is that `sticky` elements are constrained to the dimensions of their parent elements. This means if a `sticky` element is inside of a parent container that is the same dimensions as itself, the element will not stick.
Here’s an example of what a `sticky` element with CSS `top: 20px` behaves like:
*Scrolling down.* The blue border represents the dimensions of the parent container element. If the element’s top is greater than `20px` to the top of the viewport, the element is not sticky.
*Scrolling down.* When the element’s top is less than `20px` to the top of the viewport, the element is sticky.
Here’s an example of what a `sticky` element with CSS `bottom: 20px` behaves like:
*Scrolling up.* Not sticky.
*Scrolling up.* Sticky.
## Demos
* To test pure native position: sticky test, open [`demo-control.html`](http://filamentgroup.github.com/fixed-sticky/demos/demo-control.html).
## Native `position: sticky` Caveats
* Any non-default value (not `visible`) for `overflow`, `overflow-x`, or `overflow-y` on the parent element will disable `position: sticky` (via [@davatron5000](https://twitter.com/davatron5000/status/434357818498351104)).
* iOS ~~(and Chrome)~~ do not support `position: sticky;` with `display: inline-block;`.
* This plugin ~~(and Chrome’s implementation)~~ does not support use with `thead` and `tfoot`.
* Native `sticky` anchors to parent elements using their own overflow. This means scrolling the element fixes the sticky element to the parent dimensions. This plugin does not support overflow on parent elements.