قبل أربع سنوات، نشر إريك بيدلمان تدوينة رائعة حول حقيقة أنّه تم طرحposition: sticky في WebKit،
الذي كان في ذلك الوقت المحرّك الذي يشغّل Chrome (بالإضافة إلى العديد من
المتصفّحات الأخرى، بما في ذلك Safari). بعد عام واحد، وإلى حد كبير بسبب قلق مطوّري الويب، أزلنا position:sticky من Chrome لأنّ "
التطبيق الحالي غير مصمّم بطريقة تتكامل بشكل جيد مع
نظام التمرير والتركيب الحالي".
لطالما أردنا إعادة هذه الميزة إلى Chrome كما ورد في الخطأ: "بعد أن تتم
معالجة مشاكل الانتقال إلى أعلى الصفحة ودمجها، من المفترض أن نعود إلى position:
sticky ونطبّق الميزة بطريقة تتكامل بشكل جيد مع بقية
المحرك". تم العمل على خطأ العلامة الوصفية الذي يتتبّع
التنفيذ منذ عام 2013.
والخبر السارّ هو أنّه اعتبارًا من الإصدار 56 من Chrome (الإصدار التجريبي حاليًا اعتبارًا من كانون الأول (ديسمبر) 2016،
الإصدار الثابت في كانون الثاني (يناير) 2017)، أصبح position: sticky متاحًا الآن في Chrome.
ما المقصود بـ position:sticky؟
لقد استغرق الأمر بعض الوقت للوصول إلى هذا الحد، فما الذي يثير حماستي؟
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
وFirefox وSafari. في ما يلي مزيد من التفاصيل حول position:sticky: