fl_sticky
position:sticky fallback using animationframe
- Works for both top and bottom positioned elements
- Works inside overflowed containers
- No scroll listeners, nonblocking RAF used instead
- Requires no predefined HTML/CSS structure
Be aware any value on the top/bottom property will be ignored. Use margins to move the element.
Usage
// syntax<container query> <top element query> <bottom element query> <optional: override> // examples'.container' 'header' 'footer''.container' 'header''.container' false 'footer' // class name override example'.container' 'header' false stickyTop: 'custom-top' stickyBottom: 'custom-bottom' stickyReverseTop: 'custom-reverse-top' stickyReverseBottom: 'custom-reverse-bottom'
fl_sticky tries to impact performance as little as possible - it does not apply any CSS by itself, it only toggles 4 classes.
This example SCSS will work with the default class names and both positioning variants.
.container header, footer header footer