position: sticky is back in Chrome 56

[billfeller]

What is position:sticky?

position:sticky is a CSS positioning attribute that allows you to fix an element to the viewport (i.e, anchor it to the top of the screen) but only when its parent is visible in the viewport and it is within the threshold value. When it is not fixed to the viewport, the element will act like it is position: relative. It is a very nice and simple addition to the platform that removes the need to use JavaScript in an onscroll event handler just to lock an element to the top of the viewport.

Demo

https://codepen.io/pen/

tips: You need install Chrome 56+

Browser compatibility For Desktop Browser

Feature	Chrome	Edge	Firefox	IE	Opera	Safari
sticky value	56	?	32	No support	No support	6.1 -webkit-

Read More

1. Sticky positioning
2. position:sticky is back in Chrome