- ۰ تومان
- هیچ محصولی در سبد خرید نیست.
با توجه به درخواستهای داده شده برای آموزش، بیشترین درخواست برای آموزش ساخت سایدبار ثابت (چسبان) بوده است.
در این آموزش یاد میگیریم که چطور یک سایدبار بسازیم که با اسکرول صفحه، از یک جایی به بعد، ثابت بمونه در حالی که صفحه داره اسکرول میشه.
برای این کار کد زیر رو به عنوان نمونه در نظر بگیرید:
<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 زیر رو برای کد 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
استفاده شده. تعریف تعدادی از سطر ها صرفا برای دادن استایل بوده و احتمالا در پروژه واقعی شما تغییر خواهد کرد.
خب، حالا رسیدیم به قسمت جاوا اسکریپت آموزش، اول از همه باید فریم ورک 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
این پست هیچ دیدگاهی ندارد.