قبل أربع سنوات، أنشأ إريك بيدلمان مشاركة مدونة رائعة حول حقيقة دخول position: sticky إلى مجموعة أدوات WebKit، والتي كانت في ذلك الوقت هي المحرّك الذي يشغّل Chrome (بالإضافة إلى العديد من المتصفحات الأخرى بما في ذلك Safari). بعد مرور عام، وبسبب قلق مطوري الويب،
أزلنا position:sticky من Chrome "لأنّ
التنفيذ الحالي غير مصمم بطريقة تتكامل بشكل جيد مع
نظام التمرير والإنشاء الحالي".
ولطالما أردنا إعادتها إلى Chrome كما هو مذكور في الخطأ التالي: "بمجرد الانتقال إلى قاعدة التمرير والإنشاء بالترتيب، يجب أن نعود إلى position:
sticky ونطبّق هذه الميزة بطريقة تتكامل مع باقي المحرّكات". تم العمل على الخطأ التعريفي الذي
يتتبع التنفيذ منذ عام 2013.
الخبر السار هو أنه اعتبارًا من الإصدار 56 من Chrome (الإصدار التجريبي حاليًا اعتبارًا من كانون الأول (ديسمبر) 2016،
سيصبح مستقرًا في كانون الثاني (يناير) 2017) position: sticky أصبح متاحًا الآن في Chrome.
ما هو الموضع:لاصق؟
لقد استغرق الأمر بعض الوقت للوصول إلى هنا، فلماذا أنا متحمس حيال ذلك؟
position:sticky هي سمة لتحديد موضع CSS تتيح لك تثبيت عنصر في إطار العرض (أي تثبيته في أعلى الشاشة)، ولكن فقط عندما يكون العنصر الرئيسي مرئيًا في إطار العرض وكان ضمن قيمة الحدّ. وعندما لا يكون العنصر ثابتًا في إطار العرض، سيعمل العنصر على النحو التالي: position: relative. إنّها إضافة لطيفة وبسيطة جدًا إلى النظام الأساسي تزيل الحاجة إلى استخدام JavaScript في معالج أحداث onscroll من أجل تثبيت عنصر في أعلى إطار العرض.
هذا هو الشكل الذي تظهر به على مدونتي. يسمح لي ذلك بالاحتفاظ بعنوان القسم الحالي في أعلى الشاشة أثناء قراءة مقالاتي الطويلة والمجهدة :\
لتطبيق هذه الميزة، عليك تحديد أنّ السمة position
يجب أن تتضمّن القيمة sticky في العنصر الذي تريد إيقافه.
بالإضافة إلى ذلك، يمكنك أيضًا إضافة الإزاحة عندما تحتاج إلى أن تعلق.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
سيؤدي المثال السابق إلى إصلاح العنصر <h3> عند 10 بكسل من أعلى إطار العرض. لإصلاحه مباشرةً في أعلى إطار العرض، يمكنك ضبط
السمة top على top: 0px.
الدعم لهذه الميزة قوي جدًا. وهو متاح على متصفح Chrome (yay)
وFirefox وSafari. في ما يلي مزيد من التفاصيل عن position:sticky: