CSS position: sticky
Un element sticky comută între relative și fixed în funcție de poziția de derulare. Rămâne relative până la atingerea unui anumit punct de derulare, apoi se lipește pe loc ca un element fixed.
Notă: Trebuie să setezi cel puțin una dintre proprietățile top, right, bottom sau left pentru ca poziționarea sticky să funcționeze.
Exemplu
Când elementul sticky ajunge în partea de sus a paginii (top: 0), se lipește acolo.
<style>, dă unei clase div.sticky position sticky, top 0, un fundal verde și un border verde. Adaugă un div sticky urmat de suficient conținut pentru a derula, astfel încât div-ul să se lipească de partea de sus imediat ce ajunge acolo.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.sticky {
position: sticky;
top: 0;
background-color: green;
color: white;
padding: 10px;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Scroll down this page. The green box sticks to the top once it reaches it.</p>
<div class="sticky">I am sticky!</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
</div>
</body>
</html>
Utilizări comune pentru poziționarea sticky
Poziționarea sticky este adesea folosită pentru antete lipicioase (bare de navigare care rămân în partea de sus în timpul derulării), bare laterale lipicioase și antete de tabel lipicioase.
Comparativ cu fixed: un element sticky se comportă la început ca un element relative și ocupă spațiu în document, lipindu-se doar după un prag de derulare, respectând limitele părintelui său. Un element fixed este mereu fixat de fereastra de vizualizare, nu ocupă spațiu și ignoră părintele.
Toate proprietățile CSS de poziționare
Un rezumat al proprietăților de poziționare:
bottom— setează marginea de jos a unei casete poziționate.clip— decupează un element poziționat absolut.left— setează marginea din stânga a unei casete poziționate.position— setează tipul de poziționare al unui element.right— setează marginea din dreapta a unei casete poziționate.top— setează marginea de sus a unei casete poziționate.