افزونه Affix بوت استرپ

پلاگین Affix اجازه می دهد تا یک عنصر به یک منطقه در صفحه (قفل شده) شود. این اغلب با منوی های ناوبری یا دکمه های آیکون های اجتماعی استفاده می شود تا آنها را در یک منطقه خاص در حالی که به سمت بالا و پایین صفحه حرکت می کند به اصطلاح «چوب» دهد.

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

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

چگونه یک منو ناوبری Affix بوت استرپ ایجاد کنیم؟

مثال زیر نشان می دهد که چگونه یک منوی ناوبری افقی را ایجاد کنید:

مثال:

مثال زیر نشان می دهد که چگونه یک منوی ناوبری عمودی ثابت ایجاد کنید:

مثال:

اضافه کردن data-spy = “affix” به عنصر مورد نظر شما.

اختیاری اضافه کردن ویژگی data-offset-top | bottom برای محاسبه موقعیت پیمایش.

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

پلاگین.affix-top یا .affix-bottom کلاس برای نشان دادن عنصر در موقعیت بالاترین یا پایین ترین آن اضافه می کند. موقعیت با CSS در این مرحله لازم نیست.

پیمایش در گذشته از عنصر تأیید، باعث تأیید واقعی می شود – این جایی است که افزونه جایگزین کلاس .affix-top یا .affix-bottom با کلاس .affix (مجموعه position:fixed ) است. در این مرحله، باید عناصر top یا bottom سی اس اس را برای قرار دادن عنصر تأییدی در صفحه اضافه کنید.

اگر یک افست پایین تعریف شده باشد، پیمایش گذشته آن را به جای class of .affix با .affix-bottom جایگزین می کند. از آنجا که تعرفه ها اختیاری هستند، تنظیم یکی نیاز به تنظیم مناسب CSS دارد. در این مورد، موقعیت را اضافه کنید: در صورت لزوم مطلق.
در مثال بالا در بالا، پلاگین Affix افزودن class of .affix (position: fixed) به عنصر <nav> هنگامی که ما 197 پیکسل از بالا پیمایش کردیم. اگر شما مثال را باز کنید، همچنین خواهید دید که ما ویژگی بالا را با مقدار 0 به کلاس class add اضافه کردیم. این برای اطمینان از این است که نوارابزار در تمام طول زمان در بالای صفحه باقی می ماند، زمانی که ما 197 پیکسل را از بالا پیمایش کردیم.

Scrollspy & Affix

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

Vertical Menu (Sidenav)