როგორ მუშაობს position: sticky რეალურად და რატომ ვერ ხერხდება ზოგჯერ?

Question

IT Interview Practice · Accepted Answer

`position: sticky` არის ჰიბრიდი: ელემენტი იქცევა როგორც `relative` (რჩება ნორმალურ ნაკადში) **სანამ** ის არ გაჯდება თქვენ მიერ განსაზღვრულ ზღვარზე, შემდეგ იქცევა როგორც `fixed` (იფიქსირდება ადგილზე) — მაგრამ მხოლოდ მაშინ, როდესაც მისი **მიმდებარე ბლოკი** ჯერ კიდევ ეკრანზე არის.

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

`top` (ან `bottom`/`left`/`right`) მნიშვნელობა **აუცილებელია** — ეს განსაზღვრავს ზღვარს. მის გარეშე, sticky არაფერს აკეთებს.

## მოქმედების ფარგელი: ის იფიქსირდება მხოლოდ მშობლის შიგნით

sticky ელემენტი შემოიფარგლება მის **მშობელი კონტეინერით**. ის იფიქსირდება ამ მშობელში გადახვევისას, შემდეგ კი გადაიხვევა, როდესაც მშობლის ქვედა ნაწილი გაივლის. ეს არის ის, რაც "sticky სექციის заголовкებს" მუშაობს — თითოეული заголовკი იფიქსირდება მხოლოდ მისი განყოფილება თუ ხილი რჩება.

## რატომ არ მუშაობს "ხშირად" — წარუმატებლობის შემთხვევები

**1. ერთ-ერთი წინამორბენელი ელემენტს აქვს `overflow: hidden/auto/scroll`.** ეს არის #1 მიზეზი. Sticky პოზიციონირება გაწყდება ნებისმიერი გადახვევადი წინამორბენელის მიერ, რადგან ელემენტი იფიქსირდება *იმ* გადახვევის კონტეინერთან შედარებით, არა გვერდთან:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. მშობელი საკმარისად მაღალი არ არის.** Sticky აქვს აღმძვრალი თუ მშობელი უფრო მაღალია, ვიდრე sticky ელემენტი — თუ მშობელი იგივე სიმაღლეა, არაფერი არის გადახვევის, ამიტომ ის არასოდეს ჩნდება დაფიქსირებული.

**3. თეშოლდი არ არის დაყენებული.** `top`/`bottom`-ის დავიწყება ნიშნავს, რომ შენიშვნის წერტილი არ არის.

**4. სიმაღლის შეზღუდვები მშობელზე** (მაგალითად flex მშობელი, რომელიც გაჭიმავს ელემენტებს) ასევე შეიძლება წაშალოს გადახვევის ადგილი.

## გამართვის სიის აღმითითება

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## რატომ მნიშვნელოვანია ეს

`position: sticky` უძღვებს sticky заголовკებს, ცხრილის заголовკებს, სამხარეებს და "scrollspy" UI-ს JavaScript-ის გარეშე.

მაგრამ მის თავისებურებები — განსაკუთრებით ის, რომ `overflow` ნებისმიერ წინამორბენელზე ჩუმად აფუჭებს მას — ხშირი წყაროა "რატომ არ იფიქსირდება?" გამართვისას.

მიმდებარე-ბლოკის ფარგელი და overflow აფრთხე-სიტყვის ცოდნა ის არის, რაც უშუალებს მას საიმედოდ გამოიყენო.

მოქმედების ფარგელი: ის იფიქსირდება მხოლოდ მშობლის შიგნით

რატომ არ მუშაობს "ხშირად" — წარუმატებლობის შემთხვევები

გამართვის სიის აღმითითება

რატომ მნიშვნელოვანია ეს

დაკავშირებული კითხვები