Sticky و Scroll Snap — CSS بس

Sticky positioning: الهيدر يثبت وبعدين يسلّم

.section-title {  position: sticky;  top: 0;            /* يثبت لما يوصل لأول الـ scroller */  background: white; /* من غيرها المحتوى هيبان من تحته */  z-index: 1;}

العنصر الـ sticky بيتصرف عادي، لحد ما يوصل لـ top: 0، فيثبت. بس هو محبوس جوه الأب بتاعه: أول ما الـ section يخلص، الهيدر بيمشي معاه لفوق، والهيدر اللي بعده ياخد مكانه. عشان كده كل هيدر بيبان كأنه بيسلّم اللي بعده.

Scroll Snap: الصفحة تقف في مكانها

.scroller {  scroll-snap-type: y mandatory; /* محور y، والوقوف إجباري */  overflow-y: auto;}.panel {  height: 100%;  scroll-snap-align: start;      /* أول اللوحة يقف عند أول الـ scroller */}

خلّصت الفصل لما

• تعمل header sticky وتعرف ليه بيسلّم للي بعده
• تشخّص sticky مش شغال بسبب overflow
• تعمل snap بـ scroll-snap-type و scroll-snap-align
• تفرّق mandatory عن proximity
• تحل الـ header اللي بيغطي الـ anchor