BS Affix

Affix plagini

Affix plagini elementni sahifadagi ma’lum bir joyga qotirib (mahkamlab) qo‘yish imkonini beradi. Bu ko‘pincha navigatsiya menyulari yoki ijtimoiy tarmoq belgilari tugmalari bilan ishlatiladi — sahifa yuqoriga va pastga aylantirilganda ular ma’lum bir joyda "yopishib" turishi uchun.

Plagin aylantirish holatiga qarab bu xatti-harakatni yoqib-o‘chiradi (CSS position qiymatini static dan fixed ga o‘zgartiradi).

1-misol) Qotirilgan navigatsiya paneli:

2-misol) Qotirilgan yon panel (sidebar):

Affix yordamida sahifani yuqoriga va pastga aylantirganimizda menyu doimo ko‘rinib turadi va o‘z joyida qotib qoladi.

Qotirilgan navigatsiya menyusini qanday yaratish mumkin

Quyidagi misolda gorizontal qotirilgan navigatsiya menyusini qanday yaratish ko‘rsatilgan:

Quyidagi misolda vertikal qotirilgan navigatsiya menyusini qanday yaratish ko‘rsatilgan:

Misol tahlili

Qotirmoqchi bo‘lgan elementingizga data-spy="affix" ni qo‘shing.

Ixtiyoriy ravishda aylantirish holatini hisoblash uchun data-offset-top|bottom atributini qo‘shing.

Qanday ishlaydi

Affix plagini uchta klass o‘rtasida almashadi: .affix, .affix-top va .affix-bottom. Har bir klass muayyan holatni ifodalaydi. .affix klassidagi position:fixed dan tashqari, haqiqiy joylashuvlarni boshqarish uchun CSS xususiyatlarini o‘zingiz qo‘shishingiz kerak.

• Plagin element eng yuqori yoki eng pastki holatda ekanini bildirish uchun .affix-top yoki .affix-bottom klassini qo‘shadi. Bu bosqichda CSS yordamida joylashtirish talab qilinmaydi.


• Qotiriladigan elementdan o‘tib aylantirish haqiqiy qotirishni ishga tushiradi — aynan shu paytda plagin .affix-top yoki .affix-bottom klassini .affix klassi bilan almashtiradi (position:fixed ni o‘rnatadi). Bu bosqichda qotirilgan elementni sahifada joylashtirish uchun CSS top yoki bottom xususiyatini qo‘shishingiz kerak.


• Agar pastki siljish (bottom offset) belgilangan bo‘lsa, undan o‘tib aylantirilganda .affix klassi .affix-bottom bilan almashtiriladi. Siljishlar (offset) ixtiyoriy bo‘lgani uchun, ulardan birini belgilasangiz, tegishli CSS’ni ham o‘rnatishingiz kerak bo‘ladi. Bunday holda kerak bo‘lganda position:absolute ni qo‘shing.

Yuqoridagi birinchi misolda sahifa tepadan 197 piksel aylantirilganda Affix plagini <nav> elementiga .affix klassini (position:fixed) qo‘shadi. Agar misolni ochsangiz, .affix klassiga qiymati 0 bo‘lgan CSS top xususiyatini ham qo‘shganimizni ko‘rasiz. Bu sahifa tepadan 197 piksel aylantirilgandan so‘ng navigatsiya paneli doimo sahifaning yuqori qismida qolishini ta’minlaydi.

Scrollspy va Affix

Affix plaginidan Scrollspy plagini bilan birgalikda foydalanish:

Bootstrap affix bo‘yicha to‘liq ma’lumotnoma

Affix’ning barcha metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Affix ma’lumotnomamizga o‘ting.