Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benjaminreid/position-sticky-polyfill
A polyfill for position: sticky
https://github.com/benjaminreid/position-sticky-polyfill
Last synced: 3 days ago
JSON representation
A polyfill for position: sticky
- Host: GitHub
- URL: https://github.com/benjaminreid/position-sticky-polyfill
- Owner: benjaminreid
- License: mit
- Created: 2014-07-25T10:07:36.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-10-01T11:24:57.000Z (over 10 years ago)
- Last Synced: 2024-12-11T17:57:00.958Z (28 days ago)
- Language: JavaScript
- Size: 370 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# position: sticky
A polyfill for `position: sticky`, matching exactly how Chrome have it currently
implemented (as of 36.0.1985.125).*jQuery is not required but there is a jQuery plugin included for ease.*
![](http://i.imgur.com/eLw67J9.gif)
## Installation
### Using Bower
The easiest way to install position: sticky is to use [Bower](http://bower.io/),
by simply running the following command.```
$ bower install --save position-sticky-polyfill
```Then simply include `dist/position-sticky.js` into your page and you're golden.
Obviously there are other ways, but that's the only file you'll need to get going.### The ol' fashioned way
If you're not using Bower you can simply use the download or clone references
just to your right and extract the same file mentioned above.## Usage
After you've included the polyfill the function `PositionSticky` will become
globally available to you.This excepts to take an array of raw DOM elements. Here are some examples
of how you set things in motion.```
// quickly setup one element
PositionSticky([document.getElementById('element')]);// setup multiple elements
PositionSticky([
document.getElementById('element-1'),
document.getElementById('element-2'),
document.getElementById('element-3')
]);// or use jQuery
$('.element').positionSticky();
```## Development
If you plan on helping out with the development, here's how to get started.
First make sure you have `node` and `npm` intalled along with the build tool
[Gulp](http://gulpjs.com). Now you can installed the required packages to build!```
# installs required node packages
npm install# this will compress dist/position-sticky.js to dist/position-sticky.min.js
gulp
```## Caveats
- This works a lot better if you have `box-sizing: border-box;` set on everything.