رأس لاصق

في القائمة الطويلة يختفي العنوان مع أول تمرير، فينسى المستخدم أين هو. والخاصية position: sticky تُبقي العنصر في مكانه الطبيعي حتى يصل إلى حدّ تحدّده أنت، ثم يلتصق عنده ما دام العنصر الأب ظاهرًا.

وهذا الحدّ ضروري، لأن sticky دون inset-block-start (أو top) لا يفعل شيئًا. ويلتصق العنصر بأقرب عنصر يحيط به ويمكن تمريره، ولهذا تحتاج الحاوية إلى ارتفاع محدود وإلى overflow-y: auto.

وانتبه إلى أن وضع overflow: hidden على أي عنصر يقع بين الرأس والحاوية التي تقصدها يجعل ذلك العنصر هو المرجع، وبما أنه لا يمرّر فلن يلتصق شيء. وأعطِ الرأس خلفية أيضًا، وإلا ظهرت الصفوف من خلاله.