Stickyfill
position: sticky polyfill
Sticky is a block that sticks to the edge of the screen when you scroll past its top border. And when it reaches the bottom of the parent element – goes along with it. Just like this paragraph.
CSS code is straightforward:
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
top changes sticky's position relatively to the edge of the viewport. You may also specify margin-bottom to alter sticky's bottom limit a bit.
The problem is, stickies are currently supported only in Safari on OS X and iOS.
So I made Stickyfill. It emulates stickies where they aren't supported natively.
What it does:
- Supports top-positioned stickies
Supports table cell stickiesDisabled until Firefox makes a native implementation- Works in IE9+
- Disables in older browsers and in browsers with native sticky support
- Mimics original sticky behavior (where it can)
- Considers a whole lot of different use cases
What it doesn't do:
- Doesn't support left, right, bottom or combined stickies
- Doesn't support stacking of table cell stickies
- Doesn't work in overflowed blocks
- Doesn't parse your CSS (launch it manually)
In four days of diving into browser box models’ hell I discovered the difference between window.pageYOffset, document.documentElement.scrollTop, window.scrollY and document.body.scrollTop, discrepancies in offsetWidth of a block with box-sizing: border-box in different browsers, how element.offsetWidth and node.getBoundingClientRect().width differ and why, what’s the difference between getComputedStyle(element) and real values, how to get viewport’s width without scroll width and how rounding errors tend to accumulate in the most inopportune moment.