Name: ig-sticky
Owner: FT Interactive News
Description: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.
Created: 2014-01-09 14:38:44.0
Updated: 2016-09-13 21:44:03.0
Pushed: 2014-02-21 10:42:21.0
Size: 639
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
position:sticky polyfill (and a bit more)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).
In Firefox you you can go to about:config and set layout.css.sticky.enabled to “true”.
The main difference in this fork is that stuck elements trigger events to let the world know about their state. These events are 'stuck' when something gets stuck, 'unstuck' when the opposite happens, 'overlap' or 'overlap-clear' to say when a stuck element is clear of its original position or not.
These states all have corresponding CSS classes defined thus:
ses: {
plugin: 'fixedsticky',
active: 'fixedsticky-on',
inactive: 'fixedsticky-off',
clone: 'fixedsticky-dummy',
overlap: 'fixedsticky-dummy-over',
clear: 'fixedsticky-dummy-clear',
withoutFixedFixed: 'fixedsticky-withoutfixedfixed'
Just qualify element you?d like to be position:sticky with a fixedsticky class.
<div id="my-element" class="fixedsticky">
Add your own CSS to position the element. Supports any value for top or bottom.
.fixedsticky { top: 0; }
Next, add the events and initialize your sticky nodes:
$( '#my-element' ).fixedsticky();
Note: if you?re going to use non-zero values for top or bottom, fixed-sticky is victim to a cross-browser incompatibility with jQuery?s css method (namely, IE8- doesn?t normalize non-pixel values to pixels). Use pixels (or 0) for best cross-browser compatibility.
demo.html.demo-control.html.position: sticky Caveatsposition: sticky; with display: inline-block;.sticky elements are constrained to the dimensions of their parents.thead and tfoot.If you?re having weird issues with native position: sticky, you can tell fixed-sticky to use the polyfill instead of native. Just override the sticky feature test to always return false.
// After fixed-sticky.js
FixedSticky.tests.sticky = false;
demo-opt-out-native.html shows this behavior.Use the provided fixedsticky.js and fixedsticky.css files.
bower install filament-sticky
These tests were performed using fixed-sticky with fixed-fixed. It?s safest to use them together (position:fixed is a minefield on older devices), but they can be used independently.
v0.1.0: Initial release.v0.1.3: Bug fixes, rudimentary tests, destroy method.