css position: sticky
This links highlights what's new in Chrome 56:
https://developers.google.com/web/updates/2017/01/nic56?utm_source=frontendfocus&utm_medium=email
One cool thing amongst others (bluetooth access is also cool but this one css feature is something I wish we had a while back) is position:sticky.
It's available in Chrome 56 (stable as of Jan 2017) and to summarize, it allows to fix an element into the viewport when it's within a threshold.
.header {
// Element will be "fixed" when it is 10px from the top of the viewport
position:sticky;
top: 10px
}
You could set top : 0; to make it stick directly to the top of the viewport.
Have to be conscious that this positioning might not be available in other browsers as of yet.
There's this site I use to check what's available: http://caniuse.com/#search=sticky
As of now, it's not available in IE (not very surprising...)
https://developers.google.com/web/updates/2017/01/nic56?utm_source=frontendfocus&utm_medium=email
One cool thing amongst others (bluetooth access is also cool but this one css feature is something I wish we had a while back) is position:sticky.
It's available in Chrome 56 (stable as of Jan 2017) and to summarize, it allows to fix an element into the viewport when it's within a threshold.
.header {
// Element will be "fixed" when it is 10px from the top of the viewport
position:sticky;
top: 10px
}
You could set top : 0; to make it stick directly to the top of the viewport.
Have to be conscious that this positioning might not be available in other browsers as of yet.
There's this site I use to check what's available: http://caniuse.com/#search=sticky
As of now, it's not available in IE (not very surprising...)
Comments