Utilize sticky positioning

[Chalarangelo]

position: sticky; seems like a very useful feature for the header element and maybe some other elements in the hierarchy. Support is kinda low right now, but there might be a good workaround using something like @supports or similar to allow us utilize this new feature in as many browsers as possible.

This will be probably added later down the line in a Fermion minor release.

Reference: position: sticky; | CSS Tricks

[Chalarangelo]

v2.1.0 will include an implementation of this feature:

• A new class .sticky will be added for <header>s and possibly other elements (breadcrumbs are under consideration).
• The .sticky class will use the following code:

position: -webkit-sticky;
position:         sticky;
top: 0;

• An extra piece of code might be required, changing the z-index to z-index: 1000;, as there seems to be a bit of a problem with certain elements like cards and table headers. Further investigation might be required.

[naasking]

Yikes, no support at all in IE, Edge or Chrome for Android: http://caniuse.com/#search=sticky

[Chalarangelo]

I know, but I based the decision to use this on three factors:

• Most browsers will start supporting the feature soon and mini.css is built for both the present and future. At some point, people will start looking for a framework with a sticky header implementation like this.
• If old browsers ignore it, nothing happens, it will all behave normally, like position: static. No problems are caused.
• It is not the default behavior for any element, just an extra class, that might not ven be present in a lot of flavors that get developed in the future, so no harm can come of it (like breaking certain components).