JS Affix
JS Affix (affix.js)
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 sahifa aylantirilish (scroll) holatiga qarab bu xatti-harakatni yoqadi va o‘chiradi (CSS position qiymatini static’dan fixed’ga o‘zgartiradi).
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.
Batafsil ma’lumot uchun Bootstrap Affix darsligimizni o‘qing.
Maslahat: Affix plagini ko‘pincha Scrollspy plagini bilan birga ishlatiladi.
data-* atributlari orqali
Kuzatmoqchi bo‘lgan elementingizga data-spy="affix" ni, aylantirish (scroll) holatini hisoblash uchun esa data-offset-top|bottom="number" atributini qo‘shing.
Misol
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
O‘zingiz sinab ko‘ring »
JavaScript orqali
Qo‘lda quyidagicha yoqing:
Affix parametrlari
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-offset="".
| Nomi | Tipi | Default | Tavsif |
|---|---|---|---|
| offset | number | object | function | 10 | Aylantirish (scroll) holatini hisoblashda ekrandan necha piksel siljish (offset) olinishini belgilaydi. Bitta son ishlatilganda siljish ham yuqori, ham pastki yo‘nalishga qo‘shiladi. Agar faqat yuqori yoki pastki qismni boshqarmoqchi bo‘lsangiz, obyektdan foydalaning, masalan: offset: {top:25}Bir nechta siljish uchun offset: {top:25, bottom:50} dan foydalaningMaslahat: Siljishni dinamik ravishda berish uchun funksiyadan foydalaning (moslashuvchan dizaynlarda foydali bo‘lishi mumkin) |
| target | selector | node | element | window obyekti | Affix’ning maqsadli (target) elementini belgilaydi |
Affix hodisalari
Quyidagi jadvalda barcha mavjud affix hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| affix.bs.affix | Elementga qotirilgan joylashuv (fixed positioning) qo‘shilishidan oldin sodir bo‘ladi (masalan, .affix-top klassi .affix klassi bilan almashtirilish arafasida bo‘lganda) |
Sinab ko‘ring |
| affixed.bs.affix | Elementga qotirilgan joylashuv (fixed positioning) qo‘shilgandan keyin sodir bo‘ladi (masalan, .affix-top klassi .affix klassi bilan almashtirilgandan keyin) |
Sinab ko‘ring |
| affix-top.bs.affix | Yuqori element asl (qotirilmagan) holatiga qaytishidan oldin sodir bo‘ladi (masalan, .affix klassi .affix-top bilan almashtirilish arafasida bo‘lganda) |
Sinab ko‘ring |
| affixed-top.bs.affix | Yuqori element asl (qotirilmagan) holatiga qaytgandan keyin sodir bo‘ladi (masalan, .affix klassi .affix-top bilan almashtirilgandan keyin) |
Sinab ko‘ring |
| affix-bottom.bs.affix | Pastki element asl (qotirilmagan) holatiga qaytishidan oldin sodir bo‘ladi (masalan, .affix klassi .affix-bottom bilan almashtirilish arafasida bo‘lganda) |
Sinab ko‘ring |
| affixed-bottom.bs.affix | Pastki element asl (qotirilmagan) holatiga qaytgandan keyin sodir bo‘ladi (masalan, .affix klassi .affix-bottom bilan almashtirilgandan keyin) |
Sinab ko‘ring |
Ko‘proq misollar
Qotirilgan (affix) navigatsiya paneli
Gorizontal qotirilgan navigatsiya menyusini yarating:
Misol
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
O‘zingiz sinab ko‘ring »
Navigatsiya panelini avtomatik qotirish uchun jQuery’dan foydalanish
Foydalanuvchi sahifani belgilangan elementdan (<header>) o‘tkazib aylantirgandan keyin navigatsiya panelini qotirish uchun jQuery’ning outerHeight() metodidan foydalaning:
Scrollspy va Affix
Affix plaginidan Scrollspy plagini bilan birgalikda foydalanish:
Gorizontal menyu (navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
O‘zingiz sinab ko‘ring »
Vertikal menyu (yon navigatsiya — sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
O‘zingiz sinab ko‘ring »
Qotirilganda animatsiyalanadigan navigatsiya paneli
Turli .affix klasslarini boshqarish uchun CSS’dan foydalaning:
Misol - Sahifa aylantirilganda navigatsiya panelining fon rangi va ichki chekinishini o‘zgartirish
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
O‘zingiz sinab ko‘ring »
Misol - Navigatsiya panelini sirg‘anib chiqadigan qilish
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!