چگونه با position: sticky عناصر چسبان (Sticky) در CSS بسازیم؟

مقدمه

احتمالاً تا به حال از ویژگی position در CSS با مقادیر relative و absolute استفاده کرده‌اید. اما مرورگرهای مدرن امروزی از مقدار دیگری به نام sticky نیز پشتیبانی می‌کنند.

ویژگی position: sticky این امکان را فراهم می‌کند که یک عنصر هنگام اسکرول صفحه، پس از رسیدن به یک موقعیت مشخص به حالت چسبان (Sticky) دربیاید و در همان نقطه باقی بماند.

به زبان ساده، عنصری که position: sticky دارد در ابتدا مانند یک عنصر با موقعیت نسبی (relative) رفتار می‌کند، اما زمانی که اسکرول به مقدار تعیین‌شده برسد، به یک عنصر ثابت در همان محدوده تبدیل می‌شود.

در این مقاله با یک مثال عملی نحوه عملکرد position: sticky را بررسی می‌کنیم.

پیش‌نیازها

برای دنبال کردن این آموزش بهتر است با موارد زیر آشنا باشید:

• مفاهیم پایه CSS
• ویژگی‌ها و مقادیر CSS
• یک ویرایشگر کد
• مرورگری که از position: sticky پشتیبانی کند

استفاده از position: sticky

فرض کنید یک کانتینر Flex داریم که شامل چهار عنصر داخلی است. هر عنصر یک تصویر متفاوت را نمایش می‌دهد.

ساختار HTML به شکل زیر است:

<div class="container">
  <div class="item shark-1">
    <img src="/images/punk.png" width="100">
  </div>

  <div class="item shark-2">
    <img src="/images/pony.png" width="100">
  </div>

  <div class="item shark-3">
    <img src="/images/dino.png" width="100">
  </div>

  <div class="item shark-4">
    <img src="/images/steampunk.png" width="100">
  </div>
</div>

حال استایل‌های زیر را اضافه می‌کنیم:

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

نکته مهم در Flexbox

در این مثال استفاده از:

align-items: flex-start;

بسیار مهم است.

دلیل این موضوع این است که عناصر Flex به‌صورت پیش‌فرض مقدار stretch دارند و کل ارتفاع کانتینر را اشغال می‌کنند. در چنین حالتی افکت Sticky به‌درستی عمل نخواهد کرد.

بنابراین باید از flex-start استفاده کنیم تا عناصر فقط به اندازه محتوای خود ارتفاع داشته باشند.

مشاهده رفتار Sticky

پس از ذخیره فایل و اجرای آن در مرورگر، صفحه را به بالا و پایین اسکرول کنید.

متوجه خواهید شد که عناصری که دارای position: sticky هستند، پس از رسیدن به نقطه تعیین‌شده متوقف می‌شوند و در همان موقعیت باقی می‌مانند.

نکته مهم این است که عناصر Sticky فقط در محدوده والد (Parent) خود چسبان باقی می‌مانند و پس از خروج از محدوده والد، رفتار Sticky متوقف می‌شود.

چرا position: sticky گاهی کار نمی‌کند؟

دو دلیل رایج وجود دارد که باعث می‌شود عنصر Sticky به درستی عمل نکند.

1. تعیین نکردن موقعیت چسبندگی

صرفاً قرار دادن:

position: sticky;

کافی نیست.

باید حداقل یکی از مقادیر زیر را نیز مشخص کنید:

top: 0;

یا

bottom: 0;

برای اسکرول افقی نیز از left یا right استفاده می‌شود.

2. وجود overflow ناسازگار در والدها

اگر یکی از والدهای عنصر دارای یکی از مقادیر زیر باشد:

overflow: hidden;
overflow: auto;
overflow: scroll;

احتمال زیادی وجود دارد که Sticky به درستی کار نکند.

همین موضوع برای overflow-x و overflow-y نیز صدق می‌کند.

بررسی مثال

در نمونه بالا:

• عنصر اول (shark-1) به بالای صفحه می‌چسبد.
• عنصر دوم (shark-2) پس از رسیدن به فاصله 4rem از بالای صفحه متوقف می‌شود.
• عنصر سوم (shark-3) نسبت به پایین صفحه رفتار Sticky دارد.
• عنصر چهارم (shark-4) هیچ رفتار Sticky ندارد، زیرا برای آن position: sticky تعریف نشده است.

پشتیبانی مرورگرها

طبق آمار سال ۲۰۲۰، حدود ۹۵ درصد مرورگرها از position: sticky پشتیبانی می‌کنند.

تنها نکته‌ای که باید در نظر داشته باشید این است که نسخه‌های قدیمی Safari به پیشوند زیر نیاز دارند:

position: -webkit-sticky;
position: sticky;

بنابراین اگر کاربران شما از نسخه‌های قدیمی Safari استفاده می‌کنند، بهتر است این پیشوند را نیز در کدهای خود قرار دهید.

جمع‌بندی

ویژگی position: sticky یکی از کاربردی‌ترین قابلیت‌های CSS برای ساخت هدرهای چسبان، منوهای ثابت، سایدبارها و عناصر شناور هنگام اسکرول است.

این ویژگی بدون نیاز به JavaScript قابل پیاده‌سازی است و در اکثر مرورگرهای مدرن پشتیبانی می‌شود. تنها کافی است موقعیت مورد نظر را با top، bottom، left یا right مشخص کنید و مطمئن شوید هیچ والدی دارای overflow ناسازگار نباشد.

اگر به دنبال ایجاد رابط‌های کاربری مدرن و تجربه کاربری بهتر هستید، یادگیری و استفاده از position: sticky یکی از مهارت‌های ضروری در CSS محسوب می‌شود.

از همراهی شما با پارمین کلود متشکریم.