KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #claude-code #codex #developer-tools #open-source #agent-skills #ai #dsh-plugin #llm #windows

fixed-sticky

★ 1,473 Open GitHub ↗

DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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!**

[![Filament Group](https://www.filamentgroup.com/images/fg-logo-positive-sm-crop.png) ](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:

![](https://raw.githubusercontent.com/filamentgroup/fixed-sticky/master/demos/gifs/sticky-top-off.gif)

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

![](https://raw.githubusercontent.com/filamentgroup/fixed-sticky/master/demos/gifs/sticky-top-on.gif)

*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:

![](https://raw.githubusercontent.com/filamentgroup/fixed-sticky/master/demos/gifs/sticky-bottom-off.gif)

*Scrolling up.* Not sticky.

![](https://raw.githubusercontent.com/filamentgroup/fixed-sticky/master/demos/gifs/sticky-bottom-on.gif)

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

fixed-sticky

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README