How does "position: sticky" work?


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- .

asked by anonymous 23.11.2016 / 12:47

1 answer


There are several questions in one, let's go by the way.

  • But I did not understand how this works in practice ...

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;

  • I would also like to know about the compatibility ...

Chrome, I.E, Opera - Not supported; Firefox (Gecko) - Version 32 (32.0); Safari - Version 6.1 -webkit-

  • what is the support and when will I need the prefixes like -webkit- and -moz-

Safari - Version 6.1 -webkit-

I suggest reading the documentation at Position

23.11.2016 / 13:13