no-img
اِمیلا

کد ثابت کردن ستون کنار سایت (سایدبار)

بروزرسانی؛
28 ژوئن 2020
کد نویسی

فیکس کردن سایدبار در قالب سایت

یکی از موارد در طراحی قالب سایت فیکس کردن سایدبار یا به عبارتی ثابت کردن سایدبار است به صورتی که با اسکرول صفحه سایدبار ثابت خواهد ماند.

برای مشاهده دمو اینجا کلیک کنید.

ثابت کردن ستون کنار سایت با Theia Sticky Sidebar :

ساختار HTML:

درون کد های زیر داخل div محتوا sidebar باید یک div با کلاس theiaStickySidebar استفاده شود.

  <div class="sidebar">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div> 

می توانید به دلخواه این کلاس را تغییر دهید. محتوای مد نظرتان جهت فیکس شدن با اسکرول جای … قرار دهید.

اضافه کردن جاوا اسکریپت:

فایل theia-sticky-sidebar.js نسخه 1.7.0 را از این لینک زیر کنید و در قالب سایت خود در فایل js قرار دهید.

https://drive.google.com/uc?export=download&id=1Fr0MwRkhboRIvScaV1vCsKIm94quRv9O

سپس کد های JS زیر را قبل از بسته شدن تگ body در فوتر یا هدر قالب یا در فایل جاوااسکریپت قالب خود جایگذاری کنید:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/theia-sticky-sidebar.js"></script>
 
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.content, .sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script> 

اگر قابلیت منوی ثابت با اسکرول در سایتتان فعال است یا قصد اضافه کردن آنرا دارید، می توانید با مقداری که به additionalMarginTop می دهید، می توانید ارتفاع آنرا از ساید بار تنظیم کنید که تداخلی نداشته باشند.

بروز رسانی:

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

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

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

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

لینک کوتاه : https://emila.ir/?p=19882
سلام علیکم!
14
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم