Stickyfill
position: sticky polyfill

Deprecated!
Stickyfill did a good job while the browsers were implementing position: sticky support. Now you can safely use stickies without a polyfill, all modern browsers support them.

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.

The code is pretty simple: 

.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:

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)

Get it on GitHub

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.
Published on