آموزش رایگان ساخت سایدبار چسبان سایت دیجی کالا با Html | Css | Bootstrap | Jquery و پلاگین Theia Sticky Sidebar

ساخت سایدبار چسبان مشابه سایت دیجی کالا با افزونه Theia Sticky Sidebar

همانطور که می دونید سایدبار یا همون نوار کناری بخشی در سایت هستش که شما می تونید بنرهای تبلیغاتی، انواع ویجت ها، لینک آخرین مقالات یا پر فروش ترین محصولاتتون رو داخلش قرار بدید.

به احتمال خیلی زیاد بخش مربوط به سایدبار رو در خیلی از سایت ها مشاهده کرده اید برای مثال اگر وارد یکی از صفحات دسته بندی محصول سایت دیجی کالا بشید، سایدبار رو مشاهده خواهید کرد که در واقع محتوای اصلی صفحه دسته بندی از دو بخش تشکیل شده که یکی مربوط به سایدبار که داخلش یکسری فیلترهایی وجود داره و دیگری محصولات مربوط به اون دسته بندی رو نشون میده.

و اما قابلیت جذابی که به این سایدبار صفحه دسته بندی محصول دیجی کالا اضافه شده، قابلیت چسبنده یا چسبان شدن هستش، زمانی که کاربر اسکرول میکنه این سایدبار به صورت چسبان در میاد و زمانی که محتوای ستون کناری سایدبار تموم میشه این سایدبار از حالت چسبان خارج میشه.

راستی در سایت دیجی کالا سایر صفحاتی که دارای سایبار هستن این قابلیت چسبان رو هم دارن و اما می خوام بهتون یاد بدم که چطور قابلیت سایدبار چسبان رو برای سایتتون ایجاد کنید بر این منظور آموزشی رو به صورت رایگان آماده کردم که در واقع یک صفحه مقاله هستش که این صفحه مقاله دارای سایدبار هستش که کاری می کنیم که به صورت چسبان دربیاد.

اینم بگم که برای این که قابلیت چسبان رو برای sidebar مون اعمال کنیم دو روش وجود داره استفاده از افزونه و بدون افزونه که در این آموزش از پلاگین Theia Sticky Sidebar استفاده می کنیم و این آموزشمون شامل یکسری پیش نیازاتی هستش که باید از قبل یه آشنایتی به مباحث Html | Css | Bootstrap | Jquery داشته باشید.

توضیحات بیشتر رو در آموزش گفتم که برای مشاهده و دریافت رایگان سورس پروژه، دکمه های مربوطه رو در ابتدای مقاله قرار دادم.