آموزش ساخت سایدبار ثابت (fixed sidebar)


نویسنده:
چهارشنبه ۲۱ اسفند ۱۳۹۸
سایدبار ثابت

حتما تا به حال در بسیاری از وبسایت‌ها دیده‌اید که ستون کناری یا سایدبار آن‌ها بصورت چسبیده هستند. یعنی هنگامی که صفحه اسکرول می‌شود ستون کناری بصورت ثابت در صفحه می‌ماند. این نوع ستون کناری را به اصطلاح سایدبار ثابت (Fixed Sidebar) می‌گویند.

چرا باید از سایدبار ثابت استفاده کنیم؟

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

اینکه جای ستون کناری تا انتهای صفحه خالی می‌ماند در حالت عادی مشکل محسوب نمی‌شود. اما اگر بتوانیم این جای خالی را با محتوایی پر کنیم، می‌تواند به گردش کاربر در سایت و در نتیجه فروش بیشتر کمک کند.

قبلا جمله مهمی از یکی از مغازه‌دارهای ماهر شنیده بودم: “اگر در مغازه‌ات، یک قفسه خالی باشد، ضرر است! چون می‌توانی از آن استفاده کنی اما نمی‌کنی!”

چگونه ستون کناری ثابت ایجاد کنیم؟

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

معرفی کتابخانه Sticky-Kit

Sticky-kit یکی از کتابخانه‌های جاوا اسکریپت است که حجم بسیار کمی دارد (حدود ۳ کیلوبایت) و همچنین برای استفاده از آن حتما باید از فریم ورک جی‌کوئری استفاده کنید.

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

کار با کتابخانه Sticky-Kit

برای کار با کتابخانه Sticky-Kit در قدم اول باید فریم ورک جی‌کوئری را به صفحه وب خود اضافه کنید. برای دانلود فریم ورک جی‌کوئری اینجا کلیک کنید.

بعد از دانلود jQuery باید فایل آنرا به پروژه خود اضافه کنید و از طریق تگ زیر این فایل را به صفحه وب خود معرفی کنید:

<script src=”your-js-dir-url/jquery.min.js”></script>

نکته: این تگ را می‌توانید در عنصر head یا انتهای عنصر body صفحه وب خود قرار دهید.

در قدم دوم باید فایل کتابخانه Sticky-Kit را از این لینک دانلود کنید و این فایل را هم دقیقا مانند فایل jqeury به پروژه خود اضافه کنید. و در نهایت از طریق تگ زیر این کتابخانه را به صفحه وب خود معرفی کنید.

<script src=”your-js-dir-url/jquery.sticky-kit.min.js”></script>

نکته: این تگ را دقیقا زیر تگ مربوط به فریم ورک jquery قرار دهید.

توجه: یادتان باشد که به جای عبارت your-js-dir-url در کدهای بالا، مسیر فایل‌های خود را جایگزین کنید.

تا اینجا شما این کتابخانه را به صفحه وب خود اضافه کرده‌اید. حال کافیست تا درجای مناسب از توابع این کتابخانه استفاده کنید.

فرض کنید صفحه وب ما چیزی مانند تصویر زیر است:

صفحه وب نمونه

نکته: در صفحه وب بالا تگ aside حتما باید ارتفاع ۱۰۰ درصد داشته باشد تا ارتفاعی یکسان با ستون اصلی داشته باشد.

حال تنها کافیست در کدهای جاوا اسکریپت پروژه‌تان، تابع زیر را فراخوانی کنید:

$(“#side”).stick_in_parent();

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

این کتابخانه Option‌ ها و Event هایی هم دارد که می‌توان در مواقع نیاز از آنها استفاده کرد. برای مشاهده جزئیات بیشتر پیشنهاد می‌کنم به وبسایت رسمی Sticky-Kit بروید. امیدوارم این آموزش برای شما مفید بوده باشد.

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

مطالب زیر را حتما بخوانید

روش افزودن دکمه پرینت وب‌سایت

افزودن دکمه پرینت به سایت در وب‌سایت‌های آموزشی یا فروشگاهی برای چاپ رسید خرید یا بلیت بسیار کاربردی است.

بهترین‌ فریم‌ورک‌های CSS را بشناسید

زبان برنامه‌نویسی CSS در طراحی وب زبانی است که تعیین می‌کند چگونه عناصر HTML در کنار هم، درون یک صفحه...

آموزش استفاده از فونت آیکون Font Awesome 5 در صفحات وب

فونت آیکون Font Awesome یکی از محبوب‌ترین فونت آیکون‌های مورد استفاده در صفحات وب است. در این مقاله به آموزش...

معرفی 9 فریم ورک جاوا اسکریپت برتر در سال 2021

جاوا اسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است.که فریم ورک‌‌های جاوا اسکریپت هم به همان اندازه محبوب هستند. یک فریم...

آموزش تولید محتوای متنی

دوره آموزش تولید محتوای متنی در وب

آموزش تولید محتوای متنی در وب‌سایت، یک دوره‌ی آموزشی برای تولید‌کنندگان محتوا ...

دوره آموزش ووکامرس | ساخت فروشگاه اینترنتی بدون کد نویسی

دوره آموزش ووکامرس | ساخت فروشگاه اینترنتی بدون کدنویسی

دوره‌ای مختص افرادی که می‌خواهند فروشگاه اینترنتی بسازند و آن را حرفه ...

پکیج آموزش html و css

دوره آموزش HTML و CSS

دوره آموزش HTML و CSS به صورت ویدیویی و پروژه محور : ...

دیدگاهتان را بنویسید

4 پاسخ به “آموزش ساخت سایدبار ثابت (fixed sidebar)”

  1. زهراغلامی گفت:

    سلام ممنون از مطلب خوبتون
    من یه مشکلی دارم.
    میخام توی صفحات مربوط به سبد خرید و فاکتور و اینا ساید بار سایت نمایش داده نشه.
    میشه راهنماییم کنین ک چکار کنم؟

  2. سید علی گفت:

    سلام، دست شما درد نکنه خیلی گیر بود، ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 تا ٪۵۰ تخفیف برای آموزش‌ها در جشنواره پاییزی
مشاهده تخفیفات
close-image