Scrollspy ye
Bootstrap navigation walima list group components kuraya i yɛrɛma ka da scroll position kan walasa k’a jira link min bɛ baara la sisan viewport kɔnɔ.
A bɛ baara kɛ cogo min na
Scrollspy bɛ ni wajibi damadɔw ye walasa ka baara kɛ ka ɲɛ:
- N'i bɛ an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiya
util.js. - a ka kan ka baara kɛ Bootstrap nav yɔrɔ dɔ kan walima lisi kulu dɔ kan .
- Scrollspy bɛ ɲini
position: relative;fɛn min kan i bɛ ka sɛgɛsɛgɛli kɛ, a ka c’a la, o ye<body>. - Ni aw bɛ fɛn wɛrɛw sɛgɛsɛgɛ minnu tɛ
<body>, aw ye aw jija kaheightseti sɔrɔ ani ka aoverflow-y: scroll;waleya. - Ankɔri (
<a>) wajibiyalen don wa u ka kan ka fɛn dɔ jira ni o yeid.
Ni a waleyara ka ɲɛ, i ka nav walima list kulu bɛna kuraya ka kɛɲɛ n’o ye, ka .activekalasi bɔ fɛn dɔ la ka taa fɛn wɛrɛ la ka da u ni ɲɔgɔn cɛ laɲiniw kan.
Misali la navbar kɔnɔ
Aw ye yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o yeli ye. Fɛn minnu bɛ bɔ duguma, olu fana bɛna jira.
@belebeleba
Yɔrɔw kɔnɔkow ka ɲɛsin scrollspy misali ma. I ye architecture ɲuman sɔrɔ. Pasipɔri timbrew, a ye cosmopolite ye. Fine, fresh, fierce, an y’a sɔrɔ lock kan. Never planned ko don dɔ n bɛna bɔnɛ i la. A bɛ i dusukun dun ka bɔ kɛnɛ kan. I ka susuli ye cosmique ye, move bɛɛ ye magique ye. N b'a Fɔ minnu ye, n b'a Fɔ i n'a fɔ ale de ye kelen ye. Foli bɛ kanubagaw ye an ka taama dɔ kɛ. Su in yɛrɛ ta dɔrɔn i n'a fɔ zuluyekalo tile 4! Nka a ka fisa i ma ka tiɲɛni kɛ.
@mdo ye
Yɔrɔw kɔnɔkow ka ɲɛsin scrollspy misali ma. 'Cause ale de ye muse ni artiste ye. (An bɛ nin cogo de la) Donc i b'a fɛ ka tulon kɛ ni magic ye. O la sa, i ka da a la dɔrɔn sani i ka a bɛɛ di ne ma. N bɛ taama, n bɛ taama fiɲɛ kan (bi su in na). Tɛmɛ jɛmukan kan, a bɛɛ mɛn, waati ka taama taama na.
kelen
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
Yɔrɔw kɔnɔkow ka ɲɛsin scrollspy misali ma. Ni i b'a fɛ ka dɔn kɛ, n'i b'a fɛ a bɛɛ, i b'a dɔn ko ne de ye sunguru ye i ka kan ka min wele. Taama ka tɛmɛn fɔɲɔba fɛ ne tun bɛna min kɛ. O la, a to n ka i don i ka wolodon fini na. Min ye a yɛrɛ sɔrɔ. Juma tɛmɛnen su fɛ, ɔnhɔn n hakili la an ye sariya tiɲɛ, tuma bɛɛ ko an bɛna jɔ. 'Cause a ye Yoko ye dɔɔnin, Ani a ye 'Oh no' ye dɔɔnin. N b'a fɛ ka jaw droppin', ɲɛ poppin', kunkolo turnin', farikolo shockin'. Ɔwɔ, an ye an ka kartiw max ani ka gɛn ka bɔ bar la.
Ani yɔrɔ dɔw wɛrɛw kɔnɔkow, sumani ɲuman kama.
<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>
Misali ni nested nav
Scrollspy fana bɛ baara Kɛ ni nested .navs ye. ni nested .navye .active, a bangebagaw fana bɛna kɛ .active. Yɔrɔ min bɛ navbar kɛrɛfɛ, i ka o lajɛ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ.
Fɛn 1nan
Yɔrɔw kɔnɔkow ka ɲɛsin scrollspy misali ma. Nin kelen in bɛ tali kɛ fɛn 1 na. A bɛ kilomɛtɛrɛ caman ta i la, ka taa sanfɛ ten, bawo a ye o nisɔndiya kelen sɔrɔ diɲɛ kɔnɔ. Dunan dɔ bɛ n ka dilan kan, gosili bɛ n kun na. Oh, ayi. Ɲɛnamaya wɛrɛ la ne tun bɛna i bila ka to yen. 'Cause ne, ne bɛ se fɛn o fɛn na. Suiting up for ne ka masafugulan kɛlɛ. A tun bɛ to ka i bangebagaw ka dɔlɔ sonya ka wuli ka taa so sanfɛ. Tone, tan fit ani labɛn, turn it up sababu a gettin' heavy. A ka kanuya bɛ i ko dɔrɔgu. N hakili la, n ɲinɛna ko sugandili bɛ n bolo.
Fɛn 1-1nan
Yɔrɔw kɔnɔkow ka ɲɛsin scrollspy misali ma. Nin kelen in ɲɛsinnen bɛ fɛn 1-1 ma. I ye architecture ɲuman sɔrɔ. Pasipɔri timbrew, a ye cosmopolite ye. Fine, fresh, fierce, an y’a sɔrɔ lock kan. Never planned ko don dɔ n bɛna bɔnɛ i la. A bɛ i dusukun dun ka bɔ kɛnɛ kan. I ka susuli ye cosmique ye, move bɛɛ ye magique ye. N b'a Fɔ minnu ye, n b'a Fɔ i n'a fɔ ale de ye kelen ye. Foli bɛ kanubagaw ye an ka taama dɔ kɛ. Su in yɛrɛ ta dɔrɔn i n'a fɔ zuluyekalo tile 4! Nka a ka fisa i ma ka tiɲɛni kɛ.
Fɛn 1-2nan
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
Yɔrɔw kɔnɔkow ka ɲɛsin scrollspy misali ma. Nin kelen in ɲɛsinnen bɛ fɛn 3-2 ma. I ye original ye, i tɛ se ka fɛn wɛrɛ bila a nɔ na. Su bɛɛ u bɛ tulon kɛ, i ka dɔnkili. Kalifɔrni npogotigininw anw tɛ se ka sɔsɔ. I n'a fɔ kɔnɔ min tɛ ni kaburu ye. Siranya tɛ yen sisan, a to i ka hɔrɔnya dɔrɔn, ne bɛna i kanu cogo si la. N bɛ se ka sɛbɛnni ye kogo kan. I tun bɛ se ka diɲɛ yaala nka foyi tɛ gɛrɛ sanu kɔgɔjida la.
<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>
Misali ni list-group ye
Scrollspy fana bɛ baara kɛ ni .list-groups ye. Yɔrɔ min bɛ lisi kulu kɛrɛfɛ, i ka o yɔrɔ lajɛ ani ka kalansen caman yeli lajɛ min bɛ baara la.
Fɛn 1nan
Yɔrɔ kɔnɔkow ka ɲɛsin scrollspy list-group misali ma. Nin kelen in bɛ tali kɛ fɛn 1nan na.I kana mago don yafa ɲini na. Siranya tɛ yen sisan, a to i ka hɔrɔnya dɔrɔn, ne bɛna i kanu cogo si la. Jumadon tɛmɛnen su fɛ. Kana kɛ maloya kinda cɛ ye n bɛna pari kɛ ko a cɛ ka ɲi. Samiya lise kɔfɛ tuma min na an ye ɲɔgɔn sɔrɔ fɔlɔ. 'Cause ale de ye muse ni artiste ye. Mun? Ka kɔnɔ. A tun b’a miiri ko ne de ye o danfara ye.
Fɛn 2nan
Yɔrɔ kɔnɔkow ka ɲɛsin scrollspy list-group misali ma. Nin kelen in bɛ tali Kɛ fɛn 2nan na. Ɔwɔ, a bɛ dɔn Kɛ a yɛrɛ ka fɔlikan na. Oh, ayi. I tun bɛ se ka kɛ mɔgɔba ye min ka bon ni tɔw bɛɛ ye. 'Cause, baby, i ye tasuma-fɛrɛ ye. Laala sababu dɔ don min b’a to da bɛɛ bɛ datugu. I dusukun da wuli ani a to a ka daminɛ dɔrɔn. So très chic, yeah, a ye klasiki ye.
Fɛn 3nan
Yɔrɔ kɔnɔkow ka ɲɛsin scrollspy list-group misali ma. Nin kelen in bɛ tali kɛ fɛn 3nan na.An bɛ taa sanfɛ ka taa sanfɛ. A tɛ kelen kɛ abada ni tɔ kelen tɛ, an ye bɛnkan dɔ kɛ. N bɛ taama fiɲɛ kan. Mɔgɔ dɔ ko i ye i ka tatuwati bɔ. Sisan ne bɛ ka panpan i n'a fɔ wuluwulu. Tone, tan fit ani labɛn, turn it up sababu a gettin' heavy. Cause siɲɛ kelen i ye ne ta ye, siɲɛ kelen i ye ne ta ye. I ka kan ka yeelen tasuma dɔrɔn ka a to a ka yeelen bɔ! O la, an ye boulevard (boulevard) gosi. Yala aw bɛ deli ka a ye, aw bɛ a ye ko papier fin. Ne b a b ye, ne b a ye sisan.
Fɛn 4nan
Yɔrɔ kɔnɔkow ka ɲɛsin scrollspy list-group misali ma. Nin kelen in bɛ tali kɛ fɛn 4nan na. Samiya lise kɔfɛ an ye ɲɔgɔn sɔrɔ siɲɛ fɔlɔ min na. Siranya tɛ yen sisan, a to i ka hɔrɔnya dɔrɔn, ne bɛna i kanu cogo si la. Tile-musu fari ka suma fo an bɛna i ka popsicle wuli. O kanuya bɛna i bila ka wuli.
<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>
Baarakɛcogo
Donanw ka fɛnɲɛnɛmaw fɛ
Walasa ka scrollspy kɛcogo fara nɔgɔya la i ka topbar navigation kan, data-spy="scroll"i b’a fɛ ka spy min kɛ, i ka fara o kan (a ka c’a la nin bɛna kɛ <body>). O kɔ fɛ, i bɛ fɛn in Fàra a kan data-targetni Bootstrap .navyɔrɔ o yɔrɔ bangebaga-yɔrɔ ID walima a kalasi ye.
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 fɛ
I kɛlen kɔ ka fara position: relative;i ka CSS kan, i ka scrollspy wele JavaScript fɛ:
$('body').scrollspy({ target: '#navbar-example' })
ID laɲiniw minnu bɛ se ka ɲɛnabɔ, olu wajibiyalen don
Navbar jɛgɛnw ka kan ka kɛ ni id laɲiniw ye minnu bɛ se ka ɲɛnabɔ. Misali la, a <a href="#home">home</a>ka kan ka bɛn fɛn dɔ ma DOM kɔnɔ i n’a fɔ <div id="home"></div>.
Fɛn minnu tɛ :visiblelaɲini ye, olu ma jate
Laɲinifɛnw minnu tɛ :visibleka kɛɲɛ ni jQuery ye , olu bɛna jate ani u nav fɛnw bɛnninw tɛna jira abada.
Fɛɛrɛw
.scrollspy('refresh')
Ni i bɛ baara kɛ ni scrollspy ye ka fara fɛnw farali walima u bɔli kan DOM kɔnɔ, i bɛna a ɲini ka refresh fɛɛrɛ wele i n’a fɔ:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
A bɛ element dɔ ka scrollspy tiɲɛ.
Sugandili minnu bɛ kɛ
Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-offset="".
| Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
|---|---|---|---|
| offset (fɔcogo ɲuman). | nimɔrɔ | 10 ye | Pixels ka offset ka bɔ sanfɛ ni jatebɔ jɔyɔrɔ scroll. |
| kɛcogo | gaari | auto | A bɛ sɔrɔ yɔrɔ min na spyed element bɛ yɔrɔ min na.a autobɛna fɛɛrɛ ɲuman sugandi walasa ka scroll coordinates sɔrɔ. offsetbɛna baara kɛ ni jQuery offset fɛɛrɛ ye walasa ka scroll coordinates sɔrɔ. positionbɛna baara kɛ ni jQuery jɔyɔrɔ fɛɛrɛ ye walasa ka scroll coordinates sɔrɔ. |
| kun | juru | jQuery fɛn | DOM yɔrɔ | A bɛ fɛn dɔ jira min bɛna Scrollspy plugin waleya. |
Ko minnu kɛra
| Ko kɛlen suguya | Cogojirali |
|---|---|
| ka baara kɛ.bs.scrollspy ye | O ko in bɛ tasuma Bɔ sɛbɛnfura yɔrɔ la tuma o tuma ni fɛn kura dɔ Kɛra baara la sɛbɛnfura fɛ. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})