in English

Scrollspy

Si toos ah u cusboonaysii Bootstrap navigation ama tax qaybaha kooxda ee ku salaysan booska rogid si aad u muujiso xidhiidhka hadda firfircoon ee muuqaalka.

Sida ay u shaqeyso

Scrollspy waxa ay leedahay shuruudo dhawr ah si uu si sax ah ugu shaqeeyo:

  • Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .
  • Waa in lagu isticmaalo qaybta Bootstrap nav ama kooxda liiska .
  • Scrollspy waxay u baahan tahay position: relative;walxaha aad basaasayso, badanaaba <body>.
  • Markaad basaasayso canaasirta aan ahayn kan <body>, hubi inaad haysato meel heightla isku xidhay oo overflow-y: scroll;codso.
  • Barroosinnada ( <a>) ayaa loo baahan yahay oo waa inay farta ku fiiqaan shay taas leh id.

Marka si guul leh loo fuliyo, nav-gaaga ama kooxdaada liiska ayaa u cusboonaysiin doona si waafaqsan, iyaga oo ka wareejinaya .activefasalka hal shay una guuri doona kan xiga iyadoo lagu saleynayo yoolalka la xiriira.

Tusaale ahaan navbar

U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Waxyaabaha hoos u dhaca ayaa sidoo kale la iftiimin doonaa.

@ buuran

Waxyaabaha ku jira meeleeyaha tusaale ahaan scrollspy. Waxaad heshay dhismaha ugu wanaagsan Tigidhada baasaboorka, iyadu waa cosmopolitan. Fiican, cusub, daran, waxaanu ku helnay quful. Weligaa ha qorsheynin in aan maalin ku waayo. Qalbigaaga ayay cunaysaa. Dhunkashadaadu waa cosmic, dhaqaaq kasta waa sixir. Waxaan ula jeedaa kuwa, waxaan ula jeedaa sidii iyada oo kale. Salaan gacaliye aan safar qaadno. Lahaanshaha habeenka oo kale sida 4-ta Luulyo! Laakin waxaad jeclaan lahayd inaad khasaarto.

@mdo

Waxyaabaha ku jira meeleeyaha tusaale ahaan scrollspy. Sababtoo ah iyadu waa muusikiiste iyo fannaanka. (Sidaan ayaanu yeelaynaa) Markaa waxaad doonaysaa inaad sixir ku ciyaarto. Markaa iska hubi intaadan dhammaan i siin. Waan socdaa, waxaan ku socdaa hawada (caawa). Ka bood hadalka, maqashay dhammaan, wakhtiga socodka.

mid

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

Waxyaabaha ku jira meeleeyaha tusaale ahaan scrollspy. Haddii aad rabto inaad dheesho, haddii aad rabto dhammaan, waxaad ogaataa inaan ahay gabadha aad wacday. Ku dhex lugee duufaanka waxaan lahaa. Markaa aan kuu keeno suudhka dhalashadaada. Tii ka baxday. Habeenkii jimcihii hore, haa waxaan u malaynayaa in aanu sharciga jabinay, had iyo jeer dhahno waan joojinaynaa. 'Sababta waxay tahay in yar oo Yoko ah, Oo iyadu waa xoogaa 'Oh maya'. Waxaan rabaa daanka droppin', poppin isha', madaxa leexin', jir shockin'. Haa, waanu badinnay kaadhadhkayada kreditka waxaanan ka saarnay baarka.

Iyo qaar kaloo badan oo ka kooban boos-haye, qiyaas wanaagsan.

<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>

Tusaale leh nav buul leh

Scrollspy sidoo kale waxay la shaqeysaa buulka .navs. Haddii buul ku .navyaal .active, waalidkeed sidoo kale waxay ahaan doonaan .active. U rog aagga ku xiga navbar oo daawo isbeddelka fasalka firfircoon.

Shayga 1

Waxyaabaha ku jira meeleeyaha tusaale ahaan scrollspy. Midkani waxa uu la xidhiidhaa shayga 1. Waxa uu ku qaadaa mayl sare, aad u sarreeya, sababtoo ah waxay heshay hal dhoola cadeyn caalami ah. Sariirtayda waxaa jooga nin qalaad, madaxa ayaa iga garaacaya. Oh, maya. Nolol kale waxaan kaa dhigi lahaa inaad joogtid. 'Sababta aniga, wax walba waan awoodaa. Ku habboon dagaalkayga taajka. Waxaa loo isticmaali jiray in lagu xaddo khamriga waalidkaa oo aad kor ugu qaaddo saqafka. Codka, taam ah oo diyaarsan, kor u kac ayaa keenaysa in uu cuslaado. Jacaylkeedu waa sida daroogada oo kale. Waxaan u malaynayaa in aan hilmaamay in aan doorasho lahaa.

Shayga 1-1

Waxyaabaha ku jira meeleeyaha tusaale ahaan scrollspy. Midkani waxa uu la xidhiidhaa shayga 1-1. Waxaad heshay dhismaha ugu wanaagsan Tigidhada baasaboorka, iyadu waa cosmopolitan. Fiican, cusub, daran, waxaanu ku helnay quful. Weligaa ha qorsheynin in aan maalin ku waayo. Qalbigaaga ayay cunaysaa. Dhunkashadaadu waa cosmic, dhaqaaq kasta waa sixir. Waxaan ula jeedaa kuwa, waxaan ula jeedaa sidii iyada oo kale. Salaan gacaliye aan safar qaadno. Lahaanshaha habeenka oo kale sida 4-ta Luulyo! Laakin waxaad jeclaan lahayd inaad khasaarto.

Shayga 1-2

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

Waxyaabaha ku jira meeleeyaha tusaale ahaan scrollspy. Midkani waxa uu la xidhiidhaa shayga 3-2. Waxaad tahay asal, lama bedeli karo Habeenkii oo dhan way ciyaarayaan, heestaada. Gabdhaha California lama dafiri karo. Sida shimbir aan qafis lahayn. Hadda cabsi ma jirto, iska daa oo xorow, waxaan ku jeclaan doonaa shuruud la'aan. Waxa aan arkayaa qoraalka gidaarka. Waxaad u safri kartaa aduunka laakiin waxba uma soo dhawaado xeebta dahabka ah.

<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>

Tusaale kooxda liiska

Scrollspy sidoo kale waxay la shaqeysaa .list-groups. U rog aagga ku xiga kooxda liiska oo daawo isbeddelka fasalka firfircoon.

Shayga 1

Waxyaabaha ku jira boos-haynta tusaalaha liiska-kooxda-rogid-spy. Middani waxay la xiriirtaa shayga 1. Uma baahnid raaligelin. Hadda cabsi ma jirto, iska daa oo xorow, waxaan ku jeclaan doonaa shuruud la'aan. Habeenimadii Jimcaha. Ha noqon nin xishood badan oo naxariis leh, waan sharadmi doonaa inay qurux badan tahay. Xagaaga ka dib dugsiga sare markii ugu horeysay ee aan kulanay. Sababtoo ah iyadu waa muusikiiste iyo fannaanka. Waa maxay? Sug Waxay u maleeyeen in aan ka reeban ahay.

Shayga 2

Waxyaabaha ku jira boos-haynta tusaalaha liiska-kooxda-rogid-spy. Middani waxa ay la xidhiidhaa shayga 2. Haa, iyadu waxay ku dheelaysaa garaaceeda. Oh, maya. Waxaad noqon kartaa kan ugu weyn. Sababta, ilmaha, waxaad tahay rashka. Waxaa laga yaabaa inay sabab u tahay dhammaan albaabada la xiray. Qalbigaaga fur oo ha bilaabo uun. Markaa très chic, haa, iyadu waa classic.

Shayga 3

Waxyaabaha ku jira boos-haynta tusaalaha liiska-kooxda-rogid-spy. Midkani waxa uu la xidhiidhaa shayga 3. Waxa aanu u soconaa sare iyo sare. Marna midna kan kale la'aanteed, axdi baan wada galnay. Waxaan ku socdaa hawada Qof ayaa yidhi waxaa lagaa saaray tattoo-gaaga. Hadda waxaan u sabbaynayaa sida balanbaalista. Codka, taam ah oo diyaarsan, kor u kac ayaa keenaysa in uu cuslaado. Sababta mar aad tayda tahay, mar aad aniga tahay. Kaliya waa inaad shido iftiinka oo aad iftiimiso! Markaa waxaan garaacnay boulevard. Weligaa ma dareentay, ma dareemaysaa in warqad khafiif ah. Dhammaan waan arkaa, hadda waan arkaa.

Shayga 4

Waxyaabaha ku jira boos-haynta tusaalaha liiska-kooxda-rogid-spy. Midkani waxa uu la xidhiidhaa shayga 4. Xagaaga kadib dugsiga sare markii ugu horaysay ee aanu kulanay. Hadda cabsi ma jirto, iska daa oo xorow, waxaan ku jeclaan doonaa shuruud la'aan. Maqaarka qorraxdu dhunkatay ee aad u kulul waxa aanu dhalaali doonaa popsicle. Jacaylkaani wuxuu kaa dhigi doonaa inaad dib u dhigto.

<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>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto habdhaqanka scrollspy to your topbar navigation, data-spy="scroll"ku dar walxaha aad rabto in aad basaasto (inta badan tani waxay noqonaysaa <body>). Ka dib ku dar data-targetsifada aqoonsiga ama fasalka xubinta waalidka ee qayb kasta oo Bootstrap .navah.

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>

Iyadoo loo marayo JavaScript

Ka dib markaad ku position: relative;darto CSS-gaaga, wac qoraalka qoraalka JavaScript:

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

Bartilmaameedyada aqoonsiga ee la xallin karo ayaa loo baahan yahay

Xidhiidhiyayaasha Navbar waa inay lahaadaan bartilmaameedyada id la xallin karo. Tusaale ahaan, <a href="#home">home</a>waa inuu u dhigmaa wax ku jira DOM sida <div id="home"></div>.

Waxyaabaha aan :visiblebartilmaameedka ahayn waa la iska indhatiray

Walxaha bartilmaameedka ah ee aan :visiblewaafaqsanayn jQuery waa la iska indha tiraayaa oo shayada badda ee u dhigma weligood lama iftiimin doono.

Hababka

.scrollspy('refresh')

Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:

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

.scrollspy('dispose')

Wuxuu baabi'iyaa rog-rogadka curiyaha.

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset="".

Magaca Nooca Asal ahaan Sharaxaada
dhimis tirada 10 Pixels in laga bilaabo xagga sare marka la xisaabinayo booska rogid.
habka xadhig baabuur Hesho qaybta qaybta la basaasay uu ku autojiro offsetwaxay isticmaali doontaa habka offset jQuery si aad u hesho isku-dubaridka. positionwuxuu isticmaali doonaa habka booska jQuery si uu u helo isku-dubaridka.
bartilmaameed xadhig | shayga jQuery | Qaybta DOM Wuxuu qeexayaa curiyaha lagu dabaqi karo Scrollpy plugin.

Dhacdooyinka

Nooca Dhacdada Sharaxaada
firfircooni.bs.scrollspy Dhacdadani waxay dab ku shid cunsuga duuduubka mar kasta oo shay cusub uu hawl galo duubista. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})