Scrollspy
Hoʻohou ʻakomi i ka hoʻokele Bootstrap a i ʻole ka papa inoa o nā ʻāpana hui e pili ana i ke kūlana ʻōwili e hōʻike i ka loulou e hana nei i kēia manawa ma ka viewport.
Pehea e hana ai
Loaʻa iā Scrollspy kekahi mau koi e hana pono ai:
- Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, pono
util.jsia . - Pono e hoʻohana ʻia ma kahi ʻāpana Bootstrap nav a i ʻole pūʻulu papa inoa .
- Pono ʻo Scrollspy i
position: relative;ka mea āu e mākaʻikaʻi nei, maʻamau ka<body>. - Ke kiu i nā mea ʻē aʻe ma mua o ka
<body>, e hōʻoia e loaʻa kahiheighthoʻonohonoho aoverflow-y: scroll;hoʻohana ʻia. - Pono nā heleuma (
<a>) a pono e kuhikuhi i kahi mea me kēlāid.
Ke hoʻokō maikaʻi ʻia, e hōʻano hou kāu nav a i ʻole pūʻulu papa inoa e like me ka neʻe ʻana o ka .activepapa mai kahi mea a i kekahi mea e pili ana i kā lākou mau pahuhopu pili.
Laʻana ma navbar
E ʻōwili i ka ʻāpana ma lalo o ka navbar a nānā i ka loli o ka papa hana. E hōʻike ʻia nā mea hāʻule i lalo.
@momona
Maʻiʻo placeholder no ka laʻana scrollspy. Loaʻa iā ʻoe ka hale hoʻolālā maikaʻi loa. Nā peʻa palapala passport, he cosmopolitan. Maikaʻi, hou, huhū, loaʻa iā mākou ma ka laka. ʻAʻole au i hoʻolālā i kekahi lā e nalowale ana au iā ʻoe. ʻAi ʻo ia i kou puʻuwai. He kosmic kou honi, he kilokilo kēlā me kēia neʻe. ʻO koʻu manaʻo ʻo ia, ʻo ia hoʻi. Aloha e nā hoa aloha e hele kākou. Nona wale i ka pō e like me ka lā 4 o Iulai! Akā, ʻoi aku ka maikaʻi o ka lilo ʻana.
@mdo
Maʻiʻo placeholder no ka laʻana scrollspy. 'O ia ka muse a me ka mea pena. (Pēia kā mākou hana) No laila makemake ʻoe e pāʻani me ke kilokilo. No laila e hōʻoiaʻiʻo ma mua o kou hāʻawi ʻana mai iaʻu. Hele au, hele au ma ka lewa (i kēia pō). Hoʻokuʻu i ke kamaʻilio, lohe i nā mea a pau, manawa e hele wāwae.
ʻekahi
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
Maʻiʻo placeholder no ka laʻana scrollspy. Inā makemake ʻoe e hula, inā makemake ʻoe i nā mea a pau, ʻike ʻoe ʻo wau ke kaikamahine āu e kāhea aku ai. E hele i loko o ka ʻino aʻu e makemake ai. No laila, e hoʻokomo wau iā ʻoe i kou lole lā hānau. ʻO ka mea i pakele. I ka pō Pōʻalima i hala, ʻae, manaʻo wau ua uhaki mākou i ke kānāwai, e ʻōlelo mau mākou e hoʻōki. No ka mea, he wahi liʻiliʻi ʻo ia o Yoko, A he wahi liʻiliʻi ʻo ia o 'Oh no'. Makemake au i ka jaw droppin', eye poppin', head turnin', body shockin'. ʻAe, ua hoʻonui mākou i kā mākou kāleka hōʻaiʻē a kipaku ʻia mai ka pā.
A me kekahi maʻiʻo placeholder, no ke ana maikaʻi.
<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>
Laʻana me ka nested nav
Hoʻohana pū ʻo Scrollspy me nā nested .navs. Inā he pūnana .nav, ʻo .activekona mau mākua pū kekahi .active. E ʻōwili i ka ʻāpana e pili ana i ka navbar a nānā i ka hoʻololi ʻana o ka papa hana.
'ikamu 1
Maʻiʻo placeholder no ka laʻana scrollspy. Pili kēia i ka mea 1. He mau mile ke kiʻekiʻe, kiʻekiʻe loa, no ka mea, loaʻa iā ia kēlā minoʻaka honua. Aia kekahi malihini ma ko'u wahi moe, he ku'i ma ko'u poo. ʻAe, ʻaʻole. I kekahi ola ʻē aʻe e hoʻopaʻa wau iā ʻoe e noho. No ka mea, hiki iaʻu ke hana i kekahi mea. Ke kūpono nei i kaʻu kaua lei aliʻi. ʻaihue i ka waiʻona o kou mau mākua a piʻi i luna. ʻO ka leo, ʻeleʻele a mākaukau, e hoʻohuli i luna i mea e kaumaha ai kona kaumaha. He lāʻau lāʻau kona aloha. Manaʻo wau ua poina iaʻu he koho.
'ikamu 1-1
Maʻiʻo placeholder no ka laʻana scrollspy. Pili kēia i ka mea 1-1. Loaʻa iā ʻoe ka hale hoʻolālā maikaʻi loa. Nā peʻa palapala passport, he cosmopolitan. Maikaʻi, hou, huhū, loaʻa iā mākou ma ka laka. ʻAʻole au i hoʻolālā i kekahi lā e nalowale ana au iā ʻoe. ʻAi ʻo ia i kou puʻuwai. He kosmic kou honi, he kilokilo kēlā me kēia neʻe. ʻO koʻu manaʻo ʻo ia, ʻo ia hoʻi. Aloha e nā hoa aloha e hele kākou. Nona wale i ka pō e like me ka lā 4 o Iulai! Akā, ʻoi aku ka maikaʻi o ka lilo ʻana.
'ikamu 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
Maʻiʻo placeholder no ka laʻana scrollspy. Pili kēia i ka mea 3-2. He kumu ʻoe, ʻaʻole hiki ke hoʻololi. Hoʻokani lākou i ka pō a pau, kāu mele. ʻAʻole hiki ke hōʻole ʻia mākou nā kaikamahine Kaleponi. Me he manu lā ʻole. ʻAʻohe makaʻu i kēia manawa, e hoʻokuʻu a kūʻokoʻa wale nō, e aloha au iā ʻoe me ke kumu ʻole. Hiki iaʻu ke ʻike i ke kākau ʻana ma ka paia. Hiki iā ʻoe ke huakaʻi i ka honua akā ʻaʻohe mea kokoke i ke kahakai gula.
<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>
Laʻana me ka pūʻulu papa inoa
Hana pū ʻo Scrollspy me .list-groups. E ʻōwili i ka ʻāpana ma ka ʻaoʻao o ka pūʻulu papa inoa a nānā i ka hoʻololi ʻana o ka papa hana.
'ikamu 1
Maʻiʻo placeholder no ka laʻana scrollspy list-group. Pili kēia i ka mea 1. ʻAʻole pono e kala aku. ʻAʻohe makaʻu i kēia manawa, e hoʻokuʻu a kūʻokoʻa wale nō, e aloha au iā ʻoe me ke kumu ʻole. I ka po Poalima aku nei. Mai lilo ʻoe i kahi kanaka hilahila e pili ana au he nani. ʻO ke kauwela ma hope o ke kula kiʻekiʻe i ko mākou hui mua ʻana. 'O ia ka muse a me ka mea pena. He aha? E kali. Manaʻo wau ʻo wau wale nō.
'ikamu 2
Maʻiʻo placeholder no ka laʻana scrollspy list-group. Pili kēia i ka mea 2. ʻAe, hula ʻo ia i kāna kuʻi ponoʻī. ʻAe, ʻaʻole. ʻO ʻoe paha ka mea nui loa. No ka mea, e ka pēpē, he ahi ahi ʻoe. He kumu paha ke pani ʻia nā puka a pau. E wehe i kou puʻuwai a e hoʻomaka. No laila très chic, ʻae, he maʻamau ʻo ia.
'ikamu 3
Maʻiʻo placeholder no ka laʻana scrollspy list-group. Pili kēia i ka mea 3. Piʻi mākou i luna a kiʻekiʻe. ʻAʻole loa me ka ʻole o kekahi, ua hana mākou i kuʻikahi. Ke hele nei au ma ka lewa. Ua ʻōlelo kekahi ua wehe ʻia kāu peʻa. Ke lana nei au me he pepeke la. ʻO ka leo, ʻeleʻele a mākaukau, e hoʻohuli i luna i mea e kaumaha ai kona kaumaha. No ka mea, na'u oe, na'u oe. Pono ʻoe e hoʻā i ke kukui a hoʻomālamalama! No laila, pā mākou i ka boulevard. Manaʻo paha ʻoe, manaʻo he pepa lahilahi. ʻIke wau i nā mea a pau, ʻike wau i kēia manawa.
Kumuhana 4
Maʻiʻo placeholder no ka laʻana scrollspy list-group. Pili kēia i ka mea 4. ʻO ke kauwela ma hope o ke kula kiʻekiʻe i ko mākou hui mua ʻana. ʻAʻohe makaʻu i kēia manawa, e hoʻokuʻu a kūʻokoʻa wale nō, e aloha au iā ʻoe me ke kumu ʻole. Wela loa ka ʻili honi i ka lā e hoʻoheheʻe mākou i kāu popsicle. ʻO kēia aloha ka mea e levitate ai ʻoe.
<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>
Hoʻohana
Ma o nā hiʻohiʻona ʻikepili
No ka hoʻohui maʻalahi i ka hana scrollspy i kāu hoʻokele topbar, e hoʻohui data-spy="scroll"i ka mea āu e makemake ai e kiu (ʻo ka mea maʻamau ʻo ia ka <body>). A laila e hoʻohui i ke data-targetʻano me ka ID a i ʻole ka papa o ka mea makua o kekahi ʻāpana Bootstrap .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>
Ma o JavaScript
Ma hope o ka hoʻohui position: relative;ʻana i kāu CSS, e kāhea i ka scrollspy ma o JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
Pono nā pahuhopu ID hiki ke hoʻoholo
Pono nā loulou Navbar i nā pahuhopu id hiki ke hoʻoholo. No ka laʻana, <a href="#home">home</a>pono e pili i kekahi mea ma ka DOM e like me <div id="home"></div>.
ʻAʻole :visiblemālama ʻia nā mea ʻaʻole i manaʻo ʻia
E nānā ʻole ʻia nā mea kikoʻī ʻaʻole :visiblee like me ka jQuery a ʻaʻole e hōʻike ʻia kā lākou mau mea nav pili.
Nā ʻano hana
.scrollspy('refresh')
Ke hoʻohana nei i ka scrollspy me ka hoʻohui a wehe ʻana paha i nā mea mai ka DOM, pono ʻoe e kāhea i ke ʻano hoʻomaha e like me:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Hoʻopau i ka scrollspy o kekahi mea.
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset="".
| inoa | ʻAno | Default | wehewehe |
|---|---|---|---|
| offset | helu | 10 | Pikika e hoʻoneʻe mai luna mai ke helu ʻana i ke kūlana o ka ʻōwili. |
| ʻano hana | kaulahao | kaʻa | E koho i autoke ala maikaʻi loa e kiʻi ai i nā hoʻonohonoho ʻōwili. offsete hoʻohana i ka jQuery offset ala no ka loaʻa ʻana o nā hoʻonohonoho ʻōwili. positione hoʻohana i ke ʻano kūlana jQuery e kiʻi i nā hoʻonohonoho ʻōwili. |
| pahu hopu | kaula | jQuery mea | ʻElemu DOM | Hōʻike i ka mea e hoʻopili ai i ka plugin Scrollspy. |
Nā hanana
| ʻAno Hanana | wehewehe |
|---|---|
| activate.bs.scrollspy | Hoʻomaka kēia hanana i ka mea scroll i ka wā e hoʻāla ʻia ai kahi mea hou e ka scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})