{"id":13397693,"url":"https://github.com/wilddeer/stickyfill","last_synced_at":"2025-05-14T08:08:48.040Z","repository":{"id":17694598,"uuid":"20500599","full_name":"wilddeer/stickyfill","owner":"wilddeer","description":"Polyfill for CSS `position: sticky`","archived":false,"fork":false,"pushed_at":"2020-10-07T15:37:28.000Z","size":294,"stargazers_count":2282,"open_issues_count":27,"forks_count":251,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-05-13T12:53:21.966Z","etag":null,"topics":["polyfill","position-sticky","scroll","scrolling","sticky-elements"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wilddeer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://www.paypal.me/wilddeer/3usd"}},"created_at":"2014-06-04T21:01:26.000Z","updated_at":"2025-05-07T15:36:44.000Z","dependencies_parsed_at":"2022-08-30T20:01:00.445Z","dependency_job_id":null,"html_url":"https://github.com/wilddeer/stickyfill","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddeer%2Fstickyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddeer%2Fstickyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddeer%2Fstickyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddeer%2Fstickyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wilddeer","download_url":"https://codeload.github.com/wilddeer/stickyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101558,"owners_count":22014908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["polyfill","position-sticky","scroll","scrolling","sticky-elements"],"created_at":"2024-07-30T18:01:39.576Z","updated_at":"2025-05-14T08:08:43.026Z","avatar_url":"https://github.com/wilddeer.png","language":"HTML","funding_links":["https://www.paypal.me/wilddeer/3usd"],"categories":["HTML","UI"],"sub_categories":[],"readme":"----\n# ⚠ Unmaintained!\n\nStickyfill did a good job while the browsers were implementing `position: sticky` support. You can now safely use stickies without a polyfill, all modern browsers [support them natively](https://caniuse.com/?search=position%3Asticky).\n\n----\n\u003cbr\u003e\u003cbr\u003e\n\n# Polyfill for CSS `position: sticky`\n\nThe most accurate sticky polyfill out in the wild.\n\nCheck out [the demo](http://wd.dizaina.net/en/scripts/stickyfill/) and [use cases test page](http://wilddeer.github.io/stickyfill/test/).\n\n## What it does\n\n- supports top-positioned stickies,\n- works in IE9+,\n- disables itself in older IEs and in browsers with native `position: sticky` support,\n- mimics original `position: sticky` behavior:\n\n    - uses parent node as a boundary box,\n    - behaves nicely with horizontal page scrolling,\n    - only works on elements with specified `top`,\n    - mimics native `top` and `margin-bottom` behavior,\n    - ~~works with table cells~~ removed for consistency until Firefox [makes a native implementation](https://bugzilla.mozilla.org/show_bug.cgi?id=975644)\n\n## What it doesn't\n\n- doesn't support left, right, bottom or combined stickies,\n- doesn't work in overflowed blocks,\n- doesn't parse your CSS! Launch it manually.\n\n----\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#pro-tips\"\u003ePro tips\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#api\"\u003eAPI\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#feature-requests\"\u003eFeature requests\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#bug-reports\"\u003eBug reports\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#using-stickyfill\"\u003eBuy me a beer\u003c/a\u003e\n\u003c/p\u003e\n\n----\n\n## Installation\n\n### NPM\n\n```\nnpm install stickyfilljs --save\n```\n\n### Yarn\n\n```\nyarn add stickyfilljs\n```\n\n### Raw ES6 module\n\n[stickyfill.es6.js](https://raw.github.com/wilddeer/stickyfill/master/dist/stickyfill.es6.js)\n\n### Old fashioned\n\nDownload minified production ES5 script:\n\n[stickyfill.min.js](https://raw.github.com/wilddeer/stickyfill/master/dist/stickyfill.min.js)\n\nInclude it on your page:\n\n```html\n\u003cscript src=\"path/to/stickyfill.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nFirst things first, make sure your stickies work in the [browsers that support them natively](http://caniuse.com/#feat=css-sticky), e.g.:\n\n```html\n\u003cdiv class=\"sticky\"\u003e\n    ...\n\u003c/div\u003e\n```\n\n```css\n.sticky {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 0;\n}\n```\n\nThen apply the polyfill:\n\nJS:\n\n```js\nvar elements = document.querySelectorAll('.sticky');\nStickyfill.add(elements);\n```\n\nor JS + jQuery:\n\n```js\nvar elements = $('.sticky');\nStickyfill.add(elements);\n```\n\nAlso worth having a clearfix:\n\n```css\n.sticky:before,\n.sticky:after {\n    content: '';\n    display: table;\n}\n```\n\n## Pro tips\n\n- `top` specifies sticky’s position relatively to the top edge of the viewport. It accepts negative values, too.\n- You can push sticky’s bottom limit up or down by specifying positive or negative `margin-bottom`.\n- Any non-default value (not `visible`) for `overflow`, `overflow-x`, or `overflow-y` on any of the ancestor elements anchors the sticky to the overflow context of that ancestor. Simply put, scrolling the ancestor will cause the sticky to stick, scrolling the window will not. This is expected with `overflow: auto` and `overflow: scroll`, but often causes confusion with `overflow: hidden`. Keep this in mind, folks!\n\nCheck out [the test page](http://wilddeer.github.io/stickyfill/test/) to understand stickies better.\n\n## API\n\n### `Stickyfill`\n\n#### `Stickyfill.addOne(element)`\n\n`element` – `HTMLElement` or iterable element list ([`NodeList`](https://developer.mozilla.org/en/docs/Web/API/NodeList), jQuery collection, etc.). First element of the list is used.\n\nAdds the element as a sticky. Returns new [Sticky](#stickyfillsticky) instance associated with the element.\n\nIf there’s a sticky associated with the element, returns existing [Sticky](#stickyfillsticky) instance instead.\n\n#### `Stickyfill.add(elementList)`\n\n`elementList` – iterable element list ([`NodeList`](https://developer.mozilla.org/en/docs/Web/API/NodeList), jQuery collection, etc.) or single `HTMLElement`.\n\nAdds the elements as stickies. Skips the elements that have stickies associated with them.\n\nReturns an array of [Sticky](#stickyfillsticky) instances associated with the elements (both existing and new ones).\n\n#### `Stickyfill.refreshAll()`\n\nRefreshes all existing stickies, updates their parameters and positions.\n\nAll stickies are automatically refreshed after window resizes and device orientations changes.\n\nThere’s also a fast but not very accurate layout change detection that triggers this method. Call this method manually in case automatic detection fails.\n\n#### `Stickyfill.removeOne(element)`\n\n`element` – `HTMLElement` or iterable element list ([`NodeList`](https://developer.mozilla.org/en/docs/Web/API/NodeList), jQuery collection, etc.). First element of the list is used.\n\nRemoves sticky associated with the element.\n\n#### `Stickyfill.remove(elementList)`\n\n`elementList` – iterable element list ([`NodeList`](https://developer.mozilla.org/en/docs/Web/API/NodeList), jQuery collection, etc.) or single `HTMLElement`.\n\nRemoves stickies associated with the elements in the list.\n\n#### `Stickyfill.removeAll()`\n\nRemoves all existing stickies.\n\n#### `Stickyfill.forceSticky()`\n\nForce-enable the polyfill, even if the browser supports `position: sticky` natively.\n\n#### `Stickyfill.stickies`\n\nArray of existing [Sticky](#Stickyfill.Sticky) instances.\n\n### `Stickyfill.Sticky`\n\nSticky class. You can use it directly if you want:\n\n```js\nconst sticky = new Stickyfill.Sticky(element);\n```\n\nThrows an error if there’s a sticky already bound to the element.\n\n#### `Sticky.refresh()`\n\nRefreshes the sticky, updates its parameters and position.\n\n#### `Sticky.remove()`\n\nRemoves the sticky. Restores the element to its original state.\n\n## Feature requests\n\n### TL;DR\n\nThese features will never be implemented in Stickyfill:\n\n- Callbacks for sticky state changes\n- Switching classes between different sticky states\n- Other features that add non-standard functionality\n\nIf your request isn’t about one of these, you are welcome to [create an issue](https://github.com/wilddeer/stickyfill/issues/new). Please check [existing issues](https://github.com/wilddeer/stickyfill/issues) before creating new one.\n\n### Some reasoning\n\nStickyfill is a [polyfill](https://en.wikipedia.org/wiki/Polyfill). This means that it implements a feature (sticky positioning in this case) that already exists in some browsers natively, and allows to use this feature in the browsers that don’t support it yet and older versions of the browsers that didn’t support it at the time. This is its only purpose.\n\nThis also means that Stickyfill does nothing in the browsers that _do_ support sticky positioning. Which, in turn, means that those browsers won’t support any additional non-standard features.\n\n## Bug reports\n\nCheck [existing issues](https://github.com/wilddeer/stickyfill/issues) before creating new one. **Please provide a live reproduction of a bug.**\n\n## Contributing\n\n### Prerequisites\n\n- Install Git 😱\n- Install [node](https://nodejs.org/en/)\n- Install [grunt-cli](http://gruntjs.com/getting-started#installing-the-cli)\n- Clone the repo, `cd` into the repo folder, run `npm install` (or `yarn` if you are fancy).\n\nOk, you are all set.\n\n### Building and testing\n\n`cd` into the repo folder and run `grunt`. It will build the project from `/src/stickyfill.js` into `/dist` and run the watcher that will rebuild the project every time you change something in the source file.\n\nMake changes to the source file. Stick to ES6 syntax.\n\nOpen `/test/index.html` in a browser that [doesn’t support](http://caniuse.com/#feat=css-sticky) `position: sticky` to check that everything works as expected. Compare the results to the same page in a browser that supports `position: sticky`.\n\nCommit the changes. **DO NOT** commit the files in the `/dist` folder. **DO NOT** change the version in `package.json`.\n\nMake a pull request 👍\n\n### Adding / removing / updating npm packages\n\nUse [Yarn](https://yarnpkg.com/), dont’t forget to commit `yarn.lock`.\n\n## Using Stickyfill?\n\n🍻 [Buy me a beer](https://www.paypal.me/wilddeer/3usd)\n\n## License\n\n[MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilddeer%2Fstickyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilddeer%2Fstickyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilddeer%2Fstickyfill/lists"}