The CSS sticky position

The sticky position is finally coming. Let's see what we can do with it!

About 2 years ago the first drafts and versions of the CSS position value sticky have been published. Of course webkit was again among the first browser engines to support this new behavior. Unfortunately again vendor specific prefixes have been used to make later adoption even harder. Still Chrome and others only support it with a -webkit- prefix.

For enabling sticky positioning on some Chrome browsers (e.g. Chromium) one will most likely need to change the settings chrome://flags/#enable-experimental-webkit-features. In Firefox (26+) sticky positioning will only work if the about:config preference layout.css.sticky.enabled is set to true.

On the MDN sticky is described as follows: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. For instance:

Why do I think sticky positioning is a great addition? We already see a lot of pages using sticky positioning, e.g. Google News (left bar), various news or social network pages. Most of the time it is some piece of information that is placed somewhere in the layout initially, but then tries to remain at a certain offset.

Until now this has been solved using JavaScript, however, if the browser could handle this natively, we would certainly have a better performance and much smoother result. In the end it is also a few lines of JavaScript code (and an event handler) less, which otherwise would be subject for testing.