The sticky is a new value of the position property and I read a little and understood that it is possible to create HTML elements that behave at one time as position: fixed and in another as position: relative depending on an offset value.
But I did not understand how this works in practice, I would also like to know about compatibility, what support, and when I need prefixes like -webkit- and -moz- .
There are several questions in one, let's go by the way.
Here are two examples of sticky working Sticky 1 . Sticky 02
Note that when you do the scroll of the page the div of the top containing the description accompanies the scroll and when you find another div it changes. What happens is that the element is treated as relative position: relative; until it reaches the specified limit, in the case of examples top: 10px; , after that it is treated as fixed position: fixed;
Chrome, I.E, Opera - Not supported;
Firefox (Gecko) - Version 32 (32.0);
Safari - Version 6.1 -webkit-
-webkit- and -moz- Safari - Version 6.1 -webkit-
I suggest reading the documentation at Position