position:sticky در کروم بازگشته است

پل کینلان

چهار سال پیش اریک بیدلمن یک پست وبلاگ نسبتاً عالی در مورد این واقعیت ایجاد کرد position: sticky در WebKit ، که در آن زمان موتوری بود که کروم (و همچنین بسیاری از مرورگرهای دیگر از جمله سافاری) را تامین می کرد. یک سال بعد، و به تعجب توسعه دهندگان وب position:sticky از کروم حذف کردیم زیرا "پیاده سازی فعلی به گونه ای طراحی نشده است که به خوبی با سیستم اسکرول و ترکیب موجود ادغام شود".

ما همیشه می‌خواستیم آن را به کروم برگردانیم، همانطور که باگ بیان کرد: «وقتی خانه پیمایش و ترکیب خود را مرتب کردیم، باید به position: sticky و این ویژگی را به‌گونه‌ای پیاده‌سازی کنیم که به خوبی با بقیه موتور". متا باگ ردیابی پیاده سازی از سال 2013 روی آن کار شده است.

خبر خوب این است که از Chrome 56 (در حال حاضر بتا از دسامبر 2016، در ژانویه 2017 پایدار است) position: sticky اکنون در کروم بازگشته است.

موقعیت: چسبنده چیست؟

کمی طول کشید تا به اینجا رسیدم، پس چرا در مورد آن هیجان زده هستم؟

position:sticky یک ویژگی موقعیت‌یابی CSS است که به شما امکان می‌دهد یک عنصر را در viewport ثابت کنید (یعنی آن را به بالای صفحه متصل کنید) اما فقط زمانی که والد آن در viewport قابل مشاهده است و در مقدار آستانه قرار دارد. هنگامی که آن را به viewport ثابت نمی کند، عنصر مانند position: relative . این یک افزودنی بسیار زیبا و ساده برای پلتفرم است که نیاز به استفاده از جاوا اسکریپت در یک کنترل کننده رویداد 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 .

پشتیبانی از این ویژگی بسیار قوی است. این در کروم (yay)، فایرفاکس و سافاری در دسترس است. در اینجا جزئیات بیشتری در مورد position:sticky :