Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Sticky Sidebar تنها با 2 خط کد CSS

Sticky Sidebar تنها با 2 خط کد CSS

با سلام با آموزشی دیگر همراه شما هستیم

در این آموزش میخواهم که به شما آموزش دهم چگونه تنها با 2 خط کد برای خودتان Sticky Sidebar بوجود آورید، اما قبل از آن بیاید ببینیم که چیست و چه کاری انجام میدهد.

با اسکینچه همراه باشید.

Sticky Sidebar چیست ؟

Sticky به معنی چسبنده و Sidebar هم که خب مشخصه به قسمت کنار صفحه Sidebar گفته میشود. اما در حقیقت چه کاری انجام میدهد ؟

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

Sticky Sidebar Demo
پیشنمایش از منوی چسبنده

فایده Sticky Sidebar در همین موضوع هست. آنها فضا را پر میکنند اما تا جایی که شما بخواهید. اما اینکار نیاز دارد که کمی با Flexbox آشنا باشید.

پیشنهاد میشود که قبل از اینکار کمی با فریم ورک های آماده مثل Bootstrap و یا Uikit کار کنید.

برای اینکه سایدبار چسبان به وجود بیاورید به کلاس سایدبار استایل های زیر را بدهید.

.sidebar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

باشه دروغ گفتم با سه خط کد 😂😂 اما خط دوم فقط برای پشتیبانی در مرورگرهای safari میباشد.

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

در صورت وجود هر گونه مشکل از طریق فرم نظرات همین صفحه مشکل خود را حل کنید.


تا درودی دیگر، بدرود ❤️🌷

تصویر پروفایل احمدرضا ابراهیمی
احمدرضا ابراهیمی

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

دیدگاه ها
مشترک شدن
اطلاع از
guest
0 دیدگاه‌ها
بازخورد درون خطی
مشاهده تمامی دیدگاه ها