CSS Poziţie. Elementul cu position: sticky;.

Susține Lectii-Virtuale!

Elementul cu position: sticky; (poziție: lipicios;)

Un element cu position: sticky; (poziție: lipicios;) este poziționat în funcție de poziția de derulare a utilizatorului.
Un element lipicios sticky trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție de offset dată este întâlnită în vitrină - apoi se „lipeste” în loc (ca poziția: fix).





Notă: Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai jos). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
În acest exemplu, elementul sticky se lipește în partea de sus a paginii (sus: 0), când atingeți poziția de defilare.

Exemplu:

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}