لا يكفي اسم sticky للقول إن عنوانا سيلتصق بنافذة المتصفح. عند تفسير واجهة بمساعد ذكي، نحتاج إلى الأجداد في البنية وإعداد التمرير والإزاحة. نقرأ خاصية position في MDN ونؤلف هيكلا صغيرا، دون فتح صفحة أو قياس موضع عنصر.
الخلاصة السريعة
يرتبط sticky بأقرب جد له آلية تمرير، ولو لم يكن الجد الذي يمرر فعلا؛ ويلزم inset غير auto على محور الالتصاق. [1] لا نحول صورة ثابتة أو كلمة sticky إلى إثبات سلوك تمرير.
- ينتظم sticky أولا في التدفق، ويلتصق بأقرب جد له آلية تمرير ولو لم يمرر فعليا. [1] لا نفترض أن المرجع هو النافذة دائما.
- في بنيتنا عنوان داخل صندوق ب ذي overflow:hidden، وب داخل أ ذي overflow:auto؛ ب أقرب صاحب آلية، مع افتراض بقية شروط المثال. لم نر تمريرا فعليا.
- يلزم inset غير auto على المحور؛ ومع auto على طرفيه يتصرف sticky كـ relative عليه. [1] نثبت top في الفرع الأول ونتركه auto في الآخر.
- مرجع fixed يكون النافذة في الحالة المعتادة، لكن transform أو perspective أو filter غير none لدى جد قد يغيره. [1] لا نثبت سلوك الحركة من لقطة واحدة أو من اسم الخاصية.
أي جد نبحث عنه؟
تصف MDN sticky بأنه ينتظم في التدفق ثم يزاح بحسب الجد والكتلة الحاوية، وتحدد أقرب جد صاحب آلية تمرير ولو لم يكن الذي يمرر فعليا. [1]
تحتاج قراءة المساعد لذلك إلى سلسلة البنية. ليس أقرب صندوق في لقطة شاشة بالضرورة وصفا كافيا للأجداد وإعداداتهم. نميز شيفرة أو بطاقة إعداد مقدمة عن شكل مرئي لا يعرض كل هذه العلاقات.
لا نقرر هنا سلامة تصميم أو حجم مساحة. السؤال المحدد هو المرجع الذي تساعدنا القاعدة على تسميته، تحت المعلومات التي أعلنها المثال.
كيف يختلف القرب من الحركة الفعلية؟
نؤلف سلسلة: صندوق أ خارجي يحمل overflow:auto، وفيه ب يحمل overflow:hidden، وفي ب عنوان ع. نعلن أن أ هو الذي يمرر في السيناريو، وأن ب أقرب جد لع يملك آلية تمرير وفق القاعدة.
يبقى ب هو المرجع المعني بهذه العلاقة، رغم أن ورقتنا لم تعلن أنه يمرر فعليا. لو اختار المساعد أ لأنه الوحيد الذي وصفناه متحركا، يكون قد استبدل شرط الآلية بشرط الحركة المشاهدة.
هذا تعيين علاقة في بنية معلنة، لا وعد بأن العنوان تحرك مسافة معينة؛ لم نقدم أبعادا أو سجل تمرير.
| العنصر المؤلف | الإعداد | الدور المعلن |
|---|---|---|
| أ | overflow:auto | الخارجي الذي يمرر في الورقة |
| ب | overflow:hidden | أقرب جد صاحب آلية |
| ع | position:sticky | العنوان داخل ب |
هل يكفي أن نكتب sticky ؟
تحتاج الخاصية إلى inset غير auto على محور الالتصاق؛ إذا كان طرفا المحور auto، تتصرف كـ relative على ذلك المحور. [1]
نضيف في فرع أول top بقيمة 6 بكسلات، وفي فرع ثان نعلن أن top و bottom كلاهما auto. لا نصف الفرعين بالتوقع نفسه لمجرد أنهما يحملان sticky. الرقم 6 قيمة شرط اخترناها، وليس قياسا أخذناه من شاشة.
نحتاج بقية هندسة الصفحة لو أردنا حساب موضع فعلي. المقال لا يعلن أن وجود القيمة وحده يضمن ظهور حركة أو نجاح تصميم على كل جهاز.
هل نسميه fixed لأنه يبدو ثابتا؟
تشرح MDN أن fixed يكون نسبيا إلى النافذة عادة، لكن جدّا ذا transform أو perspective أو filter غير none قد يحل محلها. [1]
إذن المقارنة مع fixed نفسها لها سياق. لا نستعمل وصف «ثابت» في كلام عادي لتحديد قيمة CSS من لقطة؛ قد تظهر حالتان متطابقتين لحظة التصوير وتختلفان عند تغيير موضع التمرير.
لم نشغل صفحة أو نسحب شريطا. يسجل المساعد سلسلة الأجداد وآلية التمرير والإزاحة والخاصية المقدمة، ويفصل شرح العلاقة من قياس حركة أو استنتاج إعداد لم يظهر في المادة.
المصادر ومتابعة القراءة
- MDN: position (يفتح في نافذة جديدة)developer.mozilla.org
أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.