in English

Scrollspy

Bootstrap navigatsiyasini avtomatik ravishda yangilang yoki ko'rish oynasida qaysi havola faol ekanligini ko'rsatish uchun aylantirish holatiga qarab guruh komponentlarini ro'yxatlang.

U qanday ishlaydi

Scrollspy to'g'ri ishlashi uchun bir nechta talablarga ega:

  • Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js .
  • U Bootstrap nav komponentida yoki ro'yxat guruhida ishlatilishi kerak .
  • Scrollspy position: relative;siz josuslik qilayotgan elementni talab qiladi, odatda <body>.
  • dan boshqa elementlarga josuslik qilayotganda , to'plam va qo'llanilishiga <body>ishonch hosil qiling.heightoverflow-y: scroll;
  • Ankrajlar ( <a>) talab qilinadi va u bilan elementga ishora qilishi kerak id.

Muvaffaqiyatli amalga oshirilgandan so'ng, navbat yoki ro'yxat guruhingiz mos ravishda yangilanadi .activeva ular bilan bog'liq maqsadlar asosida sinfni bir elementdan ikkinchisiga o'tkazadi.

Navbardagi misol

Navbar ostidagi maydonni aylantiring va faol sinf o'zgarishini kuzating. Ochiladigan elementlar ham ta'kidlanadi.

@yog'

Scrollspy misoli uchun joy ushlagich tarkibi. Siz eng zo'r arxitekturaga egasiz. Pasport markalari, u kosmopolit. Yaxshi, yangi, shiddatli, biz uni qulflab oldik. Bir kun sizni yo'qotishimni hech qachon rejalashtirmagan edim. U sizning yuragingizni yeydi. Sizning o'pishingiz kosmik, har bir harakatingiz sehrdir. Aytmoqchimanki, u xuddi o‘sha odamdek. Assalomu alaykum azizlar keling sayohatga chiqamiz. 4-iyul kabi tunga egalik qiling! Lekin siz isrof bo'lishni afzal ko'rasiz.

@mdo

Scrollspy misoli uchun joy ushlagich tarkibi. Chunki u ilhomlantiruvchi va rassom. (Biz shunday qilamiz) Shunday qilib, siz sehr bilan o'ynashni xohlaysiz. Shuning uchun hammasini menga berishdan oldin ishonch hosil qiling. Men yuraman, havoda yuraman (bu kecha). Nutqni o'tkazib yuboring, hamma narsani eshiting, yurish vaqti.

bitta

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Scrollspy misoli uchun joy ushlagich tarkibi. Agar siz raqsga tushmoqchi bo'lsangiz, hammasini xohlasangiz, men siz qo'ng'iroq qilishingiz kerak bo'lgan qiz ekanligimni bilasiz. Men bo'ronni bosib o'tishni xohlardim. Shunday ekan, men sizga tug'ilgan kuningizning kostyumini kiysam. Qochib ketgani. O'tgan juma kuni kechqurun, ha, biz qonunni buzdik, deb o'ylayman, har doim biz to'xtashimizni aytamiz. Chunki u bir oz Yokoga o'xshaydi va u biroz "Oh yo'q". Men jag'ning tushishini, ko'zni qamashtirishni, bosh aylanishini, tanani hayratda qoldirishni xohlayman. Ha, biz kredit kartalarimizni oshirdik va bardan haydaldik.

Yaxshi o'lchov uchun yana bir nechta to'ldiruvchi kontent.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Ichki nav bilan misol

Scrollspy ham ichki o'rnatilgan .navs bilan ishlaydi. Agar uyali .navbo'lsa .active, uning ota-onasi ham bo'ladi .active. Navbar yonidagi maydonni aylantiring va faol sinf o'zgarishini kuzating.

1-modda

Scrollspy misoli uchun joy ushlagich tarkibi. Bu 1-bandga taalluqlidir. Sizni milya balandlikka olib boradi, shunchalik balandki, chunki u bitta xalqaro tabassumga ega. Yotog‘imda bir notanish odam bor, boshimga urildi. Oh yo'q. Boshqa hayotda seni qolishga majbur qilardim. Chunki men hamma narsaga qodirman. Mening toj jangimga tayyorman. Ota-onangizning spirtli ichimliklarini o'g'irlash va tomga chiqish uchun ishlatilgan. Ohang, sarg'ish mos va tayyor, uni yuqoriga burang, chunki u og'irlashadi. Uning sevgisi giyohvandga o'xshaydi. O'ylaymanki, men tanlovim borligini unutganman.

1-1-band

Scrollspy misoli uchun joy ushlagich tarkibi. Bu 1-1 bandiga tegishli. Siz eng zo'r arxitekturaga egasiz. Pasport markalari, u kosmopolit. Yaxshi, yangi, shiddatli, biz uni qulflab oldik. Bir kun sizni yo'qotishimni hech qachon rejalashtirmagan edim. U sizning yuragingizni yeydi. Sizning o'pishingiz kosmik, har bir harakatingiz sehrdir. Aytmoqchimanki, u xuddi o‘sha odamdek. Assalomu alaykum azizlar keling sayohatga chiqamiz. 4-iyul kabi tunga egalik qiling! Lekin siz isrof bo'lishni afzal ko'rasiz.

1-2-band

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Scrollspy misoli uchun joy ushlagich tarkibi. Bu 3-2 bandga tegishli. Siz originalsiz, uni almashtirib bo'lmaydi. Tun bo'yi ular o'ynashadi, sizning qo'shig'ingiz. Kaliforniya qizlari bizni inkor etib bo'lmaydi. Qafassiz qush kabi. Endi qo'rquv yo'q, qo'yib yubor va faqat ozod bo'l, men seni so'zsiz sevaman. Men devordagi yozuvni ko'raman. Siz dunyo bo'ylab sayohat qilishingiz mumkin, ammo oltin sohilga hech narsa yaqinlashmaydi.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Ro'yxat-guruh bilan misol

Scrollspy .list-groups bilan ham ishlaydi. Roʻyxat guruhi yonidagi maydonni aylantiring va faol sinf oʻzgarishini kuzating.

1-modda

Scrollspy roʻyxati-guruh namunasi uchun joy tutuvchi kontenti. Bu 1-bandga tegishli. Kechirim kerak emas. Endi qo'rquv yo'q, qo'yib yubor va faqat ozod bo'l, men seni so'zsiz sevaman. O'tgan juma kechasi. Uyatchan yigit bo'lmang, bu go'zal ekanligiga aminman. Biz birinchi uchrashganimizda o'rta maktabdan keyin yoz. Chunki u ilhomlantiruvchi va rassom. Nima? Kutmoq. Men bundan mustasnoman, deb o'yladim.

2-modda

Scrollspy roʻyxati-guruh namunasi uchun joy tutuvchi kontenti. Bu 2-bandga tegishli. Ha, u o'z ritmida raqsga tushadi. Oh yo'q. Siz eng buyuk bo'lishingiz mumkin edi. Sababi, bolam, sen otashin odamsan. Ehtimol, barcha eshiklar yopiq bo'lishining sababi. Yuragingizni oching va uni boshlashga ruxsat bering. Juda chiroyli, ha, u klassik.

3-modda

Scrollspy roʻyxati-guruh namunasi uchun joy tutuvchi kontenti. Bu 3-bandga taalluqlidir. Biz yuqoriroq va yuqoriroqqa boramiz. Hech qachon birisiz ikkinchisiz, biz shartnoma tuzdik. Men havoda yuraman. Kimdir tatuirovkangizni olib tashlaganingizni aytdi. Endi men kapalakdek suzaman. Ohang, sarg'ish mos va tayyor, uni yuqoriga burang, chunki u og'irlashadi. Sababi sen bir marta menikisan, bir marta menikisan. Siz shunchaki yorug'likni yoqishingiz va uning porlashiga yo'l qo'yishingiz kerak! Shunday qilib, biz bulvarga tushdik. Qachondir o'zingizni qog'oz yupqa his qildingizmi? Men hammasini ko'raman, hozir ko'raman.

4-modda

Scrollspy roʻyxati-guruh namunasi uchun joy tutuvchi kontenti. Bu 4-bandga tegishli. Biz birinchi marta uchrashganimizda o'rta maktabdan keyin yoz. Endi qo'rquv yo'q, qo'yib yubor va faqat ozod bo'l, men seni so'zsiz sevaman. Quyoshdan o'pilgan teri shunchalik issiqki, biz sizning popsiklingizni eritamiz. Bu sevgi sizni jonlantiradi.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Foydalanish

Ma'lumotlar atributlari orqali

Yuqori paneldagi navigatsiyaga osongina scrollspy harakatini qo'shish data-spy="scroll"uchun josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu <body>). Keyin har qanday Bootstrap komponentining data-targetasosiy elementining identifikatori yoki sinfi bilan atributni qo'shing..nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript orqali

CSS-ni qo'shgandan so'ng position: relative;, JavaScript orqali scrollspy-ga qo'ng'iroq qiling:

$('body').scrollspy({ target: '#navbar-example' })

Yechish mumkin bo'lgan ID maqsadlari talab qilinadi

Navbar havolalarida hal qilinadigan id maqsadlari boʻlishi kerak. Masalan, <a href="#home">home</a>DOMdagi biror narsaga mos kelishi kerak <div id="home"></div>.

Maqsadli bo'lmagan :visibleelementlar e'tiborga olinmadi

:visibleJQuery'ga mos kelmaydigan maqsadli elementlar e'tiborga olinmaydi va ularning mos navbatlari hech qachon ta'kidlanmaydi.

Usullari

.scrollspy('refresh')

Scrollspy-dan DOM-ga elementlarni qo'shish yoki olib tashlash bilan birgalikda foydalanilganda, siz yangilash usulini shunday chaqirishingiz kerak bo'ladi:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Elementning scrollspy-ni yo'q qiladi.

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset="".

Ism Turi Standart Tavsif
ofset raqam 10 O'tkazish joyini hisoblashda yuqoridan siljish uchun piksellar.
usuli ip avto Ayg'oqchi element qaysi bo'limda ekanligini topadi. auto​​aylantirish koordinatalarini olishning eng yaxshi usulini tanlaydi. offsetaylantirish koordinatalarini olish uchun jQuery ofset usulidan foydalanadi. positionaylantirish koordinatalarini olish uchun jQuery joylashuv usulidan foydalanadi.
maqsad string | jQuery obyekti | DOM elementi Scrollspy plaginini qo'llash uchun elementni belgilaydi.

Voqealar

Tadbir turi Tavsif
activate.bs.scrollspy Scrollspy tomonidan yangi element faollashtirilganda, bu hodisa aylantirish elementida yonadi. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})