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

خشایار توکلی

۳ سال پیش

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

کد 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