چرا ویژگی sticky-top در Bootstrap کار نمی‌کرد؟

در یکی از پروژه‌هایی که روی آن کار می‌کردم، نیاز داشتم یک سایدبار (ستون کناری) داشته باشم که هنگام اسکرول صفحه، به بالا بچسبد و همیشه در دید کاربر باقی بماند. با توجه به اینکه از فریم‌ورک Bootstrap استفاده می‌کردم، تصمیم گرفتم از کلاس آماده sticky-top استفاده کنم.

در یکی از پروژه‌هایی که روی آن کار می‌کردم، نیاز داشتم یک سایدبار (ستون کناری) داشته باشم که هنگام اسکرول صفحه، به بالا بچسبد و همیشه در دید کاربر باقی بماند. با توجه به اینکه از فریم‌ورک Bootstrap استفاده می‌کردم، تصمیم گرفتم از کلاس آماده sticky-top استفاده کنم.

اما برخلاف انتظار، این ویژگی اصلاً کار نمی‌کرد! در ادامه تجربه‌ای که منجر به پیدا کردن مشکل و حل آن شد را با شما به اشتراک می‌گذارم.

نمونه‌ای از کد اولیه که کار نمی‌کرد

<div class="col-xl-4 sticky-top">
    <div class="box">
        <!-- محتوا -->
    </div>
</div>

دلیل اصلی مشکل

بوت‌استرپ برای ساختار گرید خود (ستون‌ها) از ویژگی‌هایی مثل display: flex یا اندازه‌های داینامیک استفاده می‌کند. وقتی کلاس sticky-top را مستقیماً روی یکی از ستون‌های گرید مانند col-xl-4 قرار بدهیم، ممکن است ویژگی position: sticky به درستی عمل نکند.

راه‌حل صحیح

کافیست کلاس sticky-top را به جای ستون اصلی، روی یک <div> داخلی قرار دهیم:

<div class="col-xl-4">
    <div class="sticky-top">
        <div class="box">
            <!-- محتوا -->
        </div>
    </div>
</div>

CSS پیشنهادی برای sticky-top

.sticky-top {
    position: sticky;
    top: 100px;
    z-index: 1020;
}

نکات تکمیلی

• مطمئن شوید هیچ‌کدام از والدین عنصر sticky دارای overflow: hidden یا overflow: auto نباشند.
• در نمایش موبایل اگر نمی‌خواهید sticky فعال باشد، می‌توانید با Media Query آن را غیرفعال کنید:

@media (max-width: 991px) {
    .sticky-top {
        position: static !important;
    }
}

جمع‌بندی

ویژگی sticky-top ابزار بسیار مفیدی در Bootstrap است، اما محل استفاده‌ی آن اهمیت زیادی دارد. اگر با مشکل مشابهی مواجه شدید، قبل از هر چیز بررسی کنید که آیا آن را مستقیماً روی ستون‌های بوت‌استرپ اعمال کرده‌اید یا نه.

امیدوارم این مقاله به شما کمک کرده باشد. اگر سوالی داشتید یا تجربه مشابهی داشتید خوشحال می‌شوم در بخش نظرات با من در میان بگذارید.