آموزش کار با پلاگین Affix در بوت استرپ

آموزش کار با پلاگین Affix در بوت استرپ

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

آموزش کار با پلاگین Affix در بوت استرپ در ادامه مطلب، لطفا با ما همراه باشید…

آموزش کار با پلاگین Affix در بوت استرپ

این پلاگین این رفتار را بسته به موقعیت اسکرول  ( مقدار CSS را از Static به ثابت Fixed تغییر می دهد. ) تکرار می کند.

مثال 1 : یک navbar ضمیمه شده

1مشاهده دمو

مثال 2 : یک نوار کناری ضمیمه شد

2مشاهده دمو

با استفاده از ضمیمه ، وقتی که در صفحه پیمایش میکنیم ، منو همیشه ثابت و قابل رویت است.

نحوه ساخت یک منوی مسیریابی Affix

مثال زیر نحوه ایجاد یک منوی  افقی مسیریابی Affix را نشان میدهد :

مشاهده دمو

 

و مثال زیر نوحه ایجاد یک منوی عمودی مسیریابی Affix را نشان میدهد :

مشاهده دمو

 

توضیح مثال :

کلاس data-spy=”affix” را به عنصری که میخواهید ضمیمه کنید اضافه کنید. به صورت دلخواه، خاصیت data-offset-top|bottom را برای محاسبه موقعیت اسکرول، اضافه کنید.

 

شیوه کار :

پلاگین ضمیمه بین سه کلاس مختلف تغییر میکند : .affix-top ، .affix و  .affix-bottom هر کلاس نشان دهنده یک حالت خاص است برای کنترل موقعیت های واقعی ،  را باید خواص CSS را به استثنای position:fixed در کلاس .affix اضافه کنید.

  • پلاگین کلاس .affix-top یا .affix-bottom را برای نشان دادن اینکه عنصر در وضعیت بالا ، یا پایین خود قرار دارد ، اضافه میکند. موقعیت دهی با css در این قسمت مطرح نیست.
  • وقتی که اسکرول از عنصر زمیمه عبور میکند ، باعث فعال شدن ضمیمه واقعی میشود ، این جاییست که پلاگین دو کلاس .affix-bottom یا .affix-bottom را با کلاس .affix جایگزین میکند . (sets position:fixed) در این قسمت ، باید خاصیت CSS top  یا  bottom رابه طور مناسب برای تثبیت موقیعت عنصر ضمیمه شده اضافه کنید.
  • اگر آفست پایینی تعریف شده باشد،وقتی که اسکرول از ان عبور میکند کلاس .affix  را با کلاس .affix-bottom جایگزین میکند . از انجایی که آفست ها انتخابی هستند ، تنظیم یکی از انها نیازمند تنظیم css های مناسب است . در این مورد ، به هنگام نیاز position:absolute را اضافه کنید.

در مثال اولی در بالا ، پلاگین ضمیمه وقتی به اندازه 197 پیکسل  از بالا به پایین امدیم ، کلاس .affix را (position:fixed) به عنصر <nav> اضافه میکند . اگر مثال را باز کنید ، خواهید دید که ما خاصبت CSS top را با مقدار 0 کلاس .affix اضافه کردیم. این کار برای اطمینان از اینکه navbar در تمام زمان وقتی که 197 پیکسل از بالا به پایین امدیم ، بر سر جای خودش در بالا باقی میماند ، انجام میشود.

 

Scrollspy & Affix

استفاده از پلاگین Affix به همراه پلاگین Scrollspy

مشاهده مثالی دیگر

منو عمودی sidenav

مشاهده مثالی دیگر

جهت مشاهده منبع کلیک نمایید

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

صابر بوستانی

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

پکیج آموزش سی شارپ | مختص ورود به بازار کار + آموزش ساخت بازی Quiz of King

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

  1. با تشکر از سایت خوب تون

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

بازخوردهای خود را برای ما ارسال کنید