რა თვისებები გაქვთ იცით position: sticky-ის შესახებ?

position: sticky — ეს არის position: relative და position: fixed ჰიბრიდი.

• ჩვეულებრივი ქცევა: ელემენტი როგორც position: relative, ისე რჩება დოკუმენტის ჩვეულებრივ ნაკადში.
• გადატვირთვისას: როდესაც ელემენტი აღწევს მითითებულ გადატვირთვის მანძილს (მაგალითად, top: 0) თავისი გადატვირთვის კონტეინერის ან ხედვის არეალის (სკროლპორტის) მიმართ, იგი "ჩაბეჭდება" და მუშაობს როგორც position: fixed, რჩება ამ პოზიციაზე შემდგომი გადატვირთვის დროს.
• გადატვირთვის მანძილი: განისაზღვრება top, right, bottom, left თვისებებით. აუცილებელია გამოიყენოს მინიმუმ ერთი ამ თვისებიდან, რათა sticky ფუნქციონიროს სწორად.
• გადატვირთვის კონტეინერი (scroll container/containing block): ელემენტი "ჩაბეჭდება" თავის მშობელ ფորմატირების ბლოკის ფარგლებში (containing block), რომელიც ჩვეულებრივ ემთხვევა ყველაზე ახლო წინამორბედს, რომელსაც აქვს სკროლინგის შესაძლებლობა ან განსაზღვრული ფորմატირების კონტექსტი. თუ სკროლდება მხოლოდ body/html, მაშინ ჩაბეჭდვა იქნება ხედვის არეალის მიმართ.
• ჩაკეტვა: ჩაბეჭდილი ელემენტი შეიძლება გადაფაროს ქვემოთ მდებარე შინაარსი, მსგავსად position: fixed ელემენტის.
• Z-ინდექსი: ზემოთჩამოთვლილი ქცევაზე გავლენას ახდენს z-index თვისება.
• შეზღუდვები:
  • არ მუშაობს, თუ მშობელი ელემენტი აქვს overflow: hidden, overflow: auto ან overflow: scroll, რომლებიც კეტავენ შინაარსს.
  • ელემენტი შეიძლება "ჩაბეჭდოს" თუ მიაღწევს თავის გადატვირთვის კონტეინერის კიდეს.
• გამოყენება: ხშირად გამოიყენება "ჩაბეჭდილი" სათაურების, ნავიგაციის პანელების ან გვერდის მარცხენა ელემენტების შესაქმნელად, რომლებიც რჩება ხილვად გადატვირთვის დროს.

/* გამოყენების მაგალითი */
.sticky-header {
  position: sticky;
  top: 0; /* ჩაბეჭდება სკროლპორტის ან კონტეინერის ზედა ნაწილზე */
  background-color: white;
  padding: 10px;
  z-index: 10; /* გარანტიას იძლევა, რომ სათაური სხვა შინაარსის ზევით იქნება */
}