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

daskhatmin فواد طهماسبی
637 بازدید
اسکرول

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

 

کد HTML

برای این کار کد زیر رو به عنوان نمونه در نظر بگیرید:

<section id="parent">

    <section id="main-content">
        Main Content
    </section>

    <section id="sidebar">
        Sidebar
    </section>

</section>

در کد html بالا یک المنت parent و دو المنت sidebar و main-content داریم. میخواهیم وقتی صفحه اسکرول میشه، sidebar ثابت بمونه. نکته که هست اینه که سایدبار در داخل parent ثابت خواهد ماند. به نحوه ساختار کد html دقت کنید.

 

کد CSS

کد css زیر رو برای کد html بالا در نظر بگیرید:

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    height:1000px;
}
#parent{
    border:2px solid gray;
    padding:10px;
    overflow:hidden;
    height:600px;
}
#main-content{
    border:2px solid blue;
    float:right;
    width:80%;
    height:400px;
}
#sidebar{
    border:2px solid green;
    float:left;
    width:20%;
    height:200px;
}

نکته ای که در کد css بالا وجود دارد اینکه در المنت های sidebar و main-content از float استفاده شده. تعریف تعدادی از سطر ها صرفا برای دادن استایل بوده و احتمالا در پروژه واقعی شما تغییر خواهد کرد.

 

کد JavaScript

خب، حالا رسیدیم به قسمت جاوا اسکریپت آموزش، اول از همه باید فریم ورک jQuery رو لود کنید:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>

 

بعد از لود jQuery پلاگین Sticky-Kit رو لود کنید:

<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>

برای اینکه از این پلاگین استفاده کنیم باید مشخص کنیم که میخوایم کدوم المنت در المنت مادر خودش ثابت باشه. برای اینکار این کد رو بعد از لود پلاگین بنویسید:

$("#sidebar").stick_in_parent();

توجه کنید که #sidebar آی دی المنت سایدبار شما هست که باید در کل صفحه منحصر به فرد باشه.

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

صفحه گیت پلاگین Sticky-Kit در گیت هاب:  https://github.com/leafo/sticky-kit

 

بروز رسانی:

با استفاده از خود CSS هم میشه همین کار رو انجام داد:

برای این کار position المنت فرزند باید به این حالت تعریف بشه:

#sidebar{
    position: sticky;
    top: 10px;
}

دقت داشته باشید که المنت مادر باید ارتفاع مورد نظر رو داشته باشه.

daskhatmin

فواد طهماسبی

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

2 دیدگاه برای “آموزش ساخت سایدبار ثابت (چسبان)”

  1. امیرحسین شهسواری گفت:

    سلام و درود خدمت آقای طهماسبی عزیز
    آموزش بسیار عالی بود ممنونم از معرفی این کتابخونه مفید
    انشالله که همیشه موفق باشید

    1. سلام
      خوشحالم که مورد توجه شما قرار گرفته.

*اگر پرسشی دارید که مربوط به این مطلب نیست لطفا در بخش پرسشها مطرح کنید. در غیر این صورت دیدگاه شما تایید نخواهد شد.


کد HTMLCSSJavaScriptPHP