Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

Commit

Permalink
Hopefully helps with #37
Browse files Browse the repository at this point in the history
  • Loading branch information
zachleat committed Jan 23, 2015
1 parent f6a008f commit ce956a2
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 3 deletions.
29 changes: 26 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,39 @@ A CSS `position:sticky` polyfill.
- ©2013 [@zachleat](https://github.com/zachleat), Filament Group
- MIT license

## Explanation
## Browser Support

CSS position:sticky is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6.

~~In Chrome you can enable it by navigating to `chrome://flags` and enabling experimental “WebKit features” or “Web Platform features” (Canary).~~ Chrome temporarily removed their native `position: sticky` implementation.

In Firefox you you can go to `about:config` and set `layout.css.sticky.enabled` to "true".

## Usage
## Important

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:

![](demos/gifs/sticky-top-off.gif)

If the element’s top is greater than `20px` to the top of the viewport, the element is not sticky.

![](demos/gifs/sticky-top-off.gif)

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:

![](demos/gifs/sticky-bottom-off.gif)

Not sticky.

![](demos/gifs/sticky-bottom-on.gif)

Sticky.

## Plugin Usage

Just qualify element you’d like to be `position:sticky` with a `fixedsticky` class.

Expand All @@ -37,7 +61,6 @@ Next, add the events and initialize your sticky nodes:

## Native `position: sticky` Caveats

* `sticky` elements are constrained to the dimensions of their parents. This plugin behaves the same.
* 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 (yet) support use with `thead` and `tfoot`.
Expand Down
Binary file added demos/gifs/sticky-bottom-off.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/gifs/sticky-bottom-on.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/gifs/sticky-top-off.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/gifs/sticky-top-on.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ce956a2

Please sign in to comment.