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

 

سلام به همراهان گرامی

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

چندتا از اسکریپت های معروف مثل Scroll To Fixed را روی قالب HTML همکارمون تست کردم ولی متاسفانه چون بعضی از صفحه ها مطالب کوچک تر از منو (سایدبار) بود. و در هر اسکرول که انجام میشد کل صفحه به هم ریخته میشد.

scroll-to-fixed

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

برای همین سرچم را ادامه دادم تا به اسکریپتی که میخام معرفی کنم رسیدم:

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

خب آموزش رو شروع میکنیم:

ساختار HTML:

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

 

  • نکته: البته میتونین این کلاس را تغییر بدید.

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

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

 

اگه منوی سایتتون با اسکرول ثابت میشه، میتونین با مقداری که به additionalMarginTop میدید تنظیم کنید که ساید بار زیر منو نباشه.

خب فکر کنم الان باید تست کنید 😉

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

افزونه وردپرس Theia Sticky Sidebar

 

مشاهده دمو

دانلود سورس رایگان

 

منبع : Theia Sticky Sidebar

نظر شما