stickyfill

What is stickyfill?

Stickyfill is a JavaScript library that polyfills the CSS position: sticky property. It ensures that elements with position: sticky behave consistently across all browsers, including those that do not natively support this CSS feature.

What are stickyfill's main functionalities?

Polyfill for position: sticky

This feature allows you to apply the polyfill to elements with the class 'sticky'. The polyfill ensures that these elements will behave as if they have the CSS property position: sticky, even in browsers that do not support it natively.

const Stickyfill = require('stickyfilljs');
const elements = document.querySelectorAll('.sticky');
Stickyfill.add(elements);

Remove polyfill from elements

This feature allows you to remove the polyfill from elements, reverting them to their original behavior. This can be useful if you need to dynamically change the behavior of elements on your page.

const Stickyfill = require('stickyfilljs');
const elements = document.querySelectorAll('.sticky');
Stickyfill.remove(elements);

Check if an element is sticky

This feature allows you to check if a specific element is currently sticky. This can be useful for debugging or for conditional logic based on the sticky state of an element.

const Stickyfill = require('stickyfilljs');
const element = document.querySelector('.sticky');
const isSticky = Stickyfill.isSticky(element);

Other packages similar to stickyfill

stickybits

Stickybits is a lightweight alternative to Stickyfill that also provides a polyfill for position: sticky. It offers additional features such as custom classes and scroll event handling. Compared to Stickyfill, Stickybits is more feature-rich and customizable.

react-sticky

React-sticky is a React component that provides sticky positioning for elements in React applications. Unlike Stickyfill, which is a general JavaScript library, react-sticky is specifically designed for use with React, making it a better choice for React developers.

sticky-kit

Sticky-kit is a jQuery plugin that provides sticky positioning for elements. It offers additional features such as bottoming out and responsive behavior. Compared to Stickyfill, Sticky-kit is more feature-rich but requires jQuery as a dependency.

README

Stickyfill

A polyfill for position: sticky for browsers that don't support it yet.

Essentially wilddeer/stickyfill wrapped as a webmodule.

Installation

npm install stickyfill

Usage

var Stickyfill = require('stickyfill');

// you can optionally pass `document` and `window` for reuse in iframes
var stickyfill = Stickyfill();

// make sure to add the elements you want to polyfill
stickyfill.add(el);

For more detailed information, see the original Readme.md file on the wilddeer/stickyfill repo.

Acknowledgements

Thanks to Oleg Korsunsky (@wilddeer), for the excelent polyfill implementation. @wilddeer, if you have any suggestions/comments on the way this is bundled, or want contributor access to this repo or to npm, just create an issue and we'll add you. ;)

License

MIT License