position: sticky هي طريقة جديدة لوضع العناصر وتشبه position: fixed من الناحية النظرية. والفرق هو أنّ العنصر الذي يتضمّن position: sticky يتصرف مثل position: relative ضمن العنصر الرئيسي، إلى أن يتم استيفاء حدّ أدنى محدّد للقيمة المُحوَّلة في إطار العرض.
حالات الاستخدام
نص مقتبس من اقتراح إدوارد أوكونور الأصلي لهذه الميزة:
لمحة عن وضع الإعلانات الثابتة
من خلال إضافة position: sticky (بادئة المورّد) فقط، يمكننا ضبط عنصر على أنّه position: relative إلى أن ينتقل المستخدم إلى العنصر (أو العنصر الرئيسي) ليكون على مسافة 15 بكسل من الأعلى:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
عند top: 15px، يصبح العنصر ثابتًا.
لتوضيح هذه الميزة في سياق عملي، أنشأت نموذجًا تجريبيًا يُثبِّت عناوين المدونات أثناء الانتقال إلى الأسفل أو الأعلى.
الطريقة القديمة: أحداث الانتقال في الصفحة
حتى الآن، لتحقيق التأثير المُلصق، كانت المواقع الإلكترونية تُعدّ أدوات معالجة أحداث scroll في JavaScript. نستخدم هذه التقنية أيضًا في الدروس على html5rocks. على الشاشات التي يقلّ حجمها عن 1200 بكسل، يتغيّر الشريط الجانبي لجدول المحتويات إلى position: fixed بعد الانتقال إلى أسفل الصفحة أو أعلاها لعدد معيّن من المرّات.
في ما يلي الطريقة (القديمة الآن) لعرض عنوان ثابت في أعلى إطار العرض عندما ينتقل المستخدم للأسفل، ويعود إلى مكانه عندما ينتقل للجزء العلوي من الصفحة:
<div class="header"></div>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
جرِّب هذا الرابط: http://output.jsbin.com/omanut/2/
هذا الإجراء سهل بما يكفي، ولكنّ هذا النموذج يتلاشى بسرعة إذا أردت تنفيذ
هذا لمجموعة من عقد DOM، مثل كل عنوان <h1> لمدونة أثناء تنقّل المستخدم.
أسباب عدم ملاءمة JavaScript
بشكل عام، لا يُنصح باستخدام عناصر التحكّم في الانتقال للأعلى أو للأسفل. يميل المستخدمون إلى بذل الكثير من الجهد ويتساءلون عن سبب بطء واجهة المستخدم.
هناك نقطة أخرى يجب أخذها في الاعتبار وهي أنّ المزيد والمزيد من المتصفّحات ينفذون ميزة التمرير السريع باستخدام الأجهزة لتحسين الأداء. تكمن المشكلة في أنّه عند استخدام معالجات التمرير في JavaScript، قد تعود المتصفّحات إلى وضع (برنامج) أبطأ. لم نعد نستخدم وحدة معالجة الرسومات الآن. بدلاً من ذلك، سنعود إلى وحدة المعالجة المركزية. النتيجة هي يلاحظ المستخدمون المزيد من الارتباك عند الانتقال إلى أسفل صفحتك.
وبالتالي، من المنطقي أن تكون هذه الميزة توضيحية في CSS.
الدعم
لا تتوفّر مواصفات لهذا الجهاز. تم اقتراحه على www-style في حزيران (يونيو) الماضي، وتم طرحه في WebKit للتو. وهذا يعني أنّه لا تتوفّر مستندات جيدة للإشارة إليها. تجدر الإشارة إلى أنّه وفقًا لهذا الخطأ، إذا تم تحديد كل من left وright، سيفوز left. وبالمثل، إذا تم استخدام top وbottom في الوقت نفسه، سيفوز top.
تتوفّر الميزة حاليًا في الإصدار 23.0.1247.0 من Chrome والإصدارات الأحدث (إصدار Canary الحالي) وWebKit Nightly.