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

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

Want create site? Find Free WordPress Themes and plugins.

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

 

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

Did you find apk for android? You can find new Free Android Games and apps.

مطالب مشابه

2 سال پیش

۸ هک کاربردی برای سفارشی تر کردن وردپرس

  همه ما وردپرس را دوست داریم ، چیزی که ما را بیشتر عاشق آن می کند ، امکان سفارشی کردن آسانش است.یعنی با مقداری کد می توانید کارهای بزرگی بوسیله وردپرس انجام دهید،مخصوصا اگر از filterها،action ها و hook ها استفاده کنیم. گرچه وردپرس ۳ + با امکاناتش همه اذهان را متوجه خودش کرد ولی گاهی چیزی که ما نیاز داریم ...

آموزش,امنیت,وردپرس بدون دیدگاه

2 سال پیش

پیش نمایش سریع محصولات در ووکامرس با YITH WooCommerce Quick View

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

آموزش,افزونه,وردپرس بدون دیدگاه

2 سال پیش

دانلود قالب html هَنس نسخه ۱٫۰ به سبک متریال

با سلام این بار یه قالب تجاری رو به صورت رایگان میزارم این قالب به سبک متریال هست که جدیدا باب شده و بسیار هم زیباست . این قالب در اولین نسخه به صورت html عرضه شده و کاملا رسپانسیو است دارای سه برگه home و 404 و blog-single و blog-listing میباشد. هم اکنون میتوانید این قالب زیبا را از سرور ...

CSS3,HTML5,پوسته بدون دیدگاه

این پست هیچ دیدگاهی ندارد.

افزودن دیدگاه