Scrollspy
Whakahōu aunoatia te whakaterenga Bootstrap, whakarārangihia rānei ngā wāhanga rōpū i runga i te tūnga panuku hei tohu ko tēhea hononga e hohe ana i te tauranga tirohanga.
Me pehea te mahi
He torutoru nga whakaritenga a Scrollspy hei mahi tika:
- Mena kei te hanga koe i to maatau JavaScript mai i te puna, me
util.js. - Me whakamahi i runga i te waahanga Bootstrap nav , te roopu rarangi ranei .
- Ka hiahia a Scrollspy
position: relative;ki te huānga e tuteia ana e koe, ko te tikanga ko te<body>. - A, no te tutei i runga i huānga atu i te
<body>, kia tino ki te whai i teheighthuinga meoverflow-y: scroll;te tono. - Ko nga punga (
<a>) e hiahiatia ana me tohu ki tetahi huānga me teraid.
Ina oti pai te whakatinanatanga, ka whakahōuhia e to nav me to roopu rarangi ingoa, ka nekehia te .activeakomanga mai i tetahi mea ki tetahi atu i runga i o raatau whaainga.
Tauira i roto i te navbar
Panuku i te waahi kei raro i te pae whakatere ka mataki i te huringa o te karaehe hohe. Ko nga taonga takaiho ka tohua ano.
@ngako
Ihirangi waahi mo te tauira scrollspy. I whiwhi koe i te hoahoanga tino pai. Ko nga tohu uruwhenua, he ao ia. He pai, he hou, he weriweri, ka mau matou ki te raka. Kaore rawa i whakaaro kia kotahi ra ka ngaro koe i ahau. Ka kainga e ia to ngakau. He aorangi to kihi, he makutu nga nekehanga katoa. Ko te tikanga ko nga mea, ko te tikanga ko ia te mea. Tena koutou e te hoa aroha, kia haere tatou. Nou ake te po penei i te 4 o Hurae! Engari he pai ke ki te moumou.
@mdo
Ihirangi waahi mo te tauira scrollspy. 'No te mea ko ia te puoro me te kaitoi. (Koinei te mahi) Na kei te pirangi koe ki te takaro makutu. No reira kia tino mohio koe i mua i to homaitanga katoa ki ahau. Kei te hikoi ahau, kei te hikoi ahau i runga i te hau (i tenei po). Kapohia te korero, ka rongo katoa, te wa ki te hikoi.
kotahi
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
Ihirangi waahi mo te tauira scrollspy. Mena kei te pirangi koe ki te kanikani, mena kei te pirangi koe i nga mea katoa, kei te mohio koe ko au te kotiro me karanga koe. Haere i roto i te tupuhi ka pai ahau. No reira tukua ahau kia mau koe i roto i to koti huritau. Ko te mea i mawhiti atu. I tera po o te Paraire, ae ki taku whakaaro kua takahia e matou te ture, me kii tonu ka mutu. 'Na te mea he iti ia no Yoko, A he iti nei tana 'Aue'. Kei te pirangi ahau i te kauae droppin', eye poppin', head turnin', body shockin'. Ae, i whakanuia e matou a matou kaari nama ka panaia mai i te paera.
Me etahi atu ihirangi waahi, mo te mehua pai.
<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>
Tauira me te nav kohanga
Ka mahi ano a Scrollspy me nga kohanga .navs. Mena he kohanga .nav, .activeka noho ano ona matua .active. Panukuhia te waahi ki te taha o te pae whakaterenga ka matakitaki i te huringa o te karaehe hohe.
Te nama take 1
Ihirangi waahi mo te tauira scrollspy. E pa ana tenei ki te nama 1. He maero te teitei, he tiketike rawa atu, na te mea kei a ia tera ataata o te ao. He tauhou kei roto i taku moenga, he paheketanga kei toku mahunga. Aue, kahore. I tetahi atu oranga ka noho ahau ki a koe. No te mea ka taea e au nga mea katoa. E tika ana mo taku whawhai whakakorona. He mea tahae i te waipiro a o matua ka piki ki te tuanui. Ko te oro, he kiri karaka, he rite, ka huri ake kia taumaha ai. Ko tana aroha he rite ki te tarukino. Te mana'o nei ahau i wareware ahau i ahau i te kōwhiringa.
Te nama take 1-1
Ihirangi waahi mo te tauira scrollspy. E pa ana tenei ki te waahanga 1-1. I whiwhi koe i te hoahoanga tino pai. Ko nga tohu uruwhenua, he ao ia. He pai, he hou, he weriweri, ka mau matou ki te raka. Kaore rawa i whakaaro kia kotahi ra ka ngaro koe i ahau. Ka kainga e ia to ngakau. He aorangi to kihi, he makutu nga nekehanga katoa. Ko te tikanga ko nga mea, ko te tikanga ko ia te mea. Tena koutou e te hoa aroha, kia haere tatou. Nou ake te po penei i te 4 o Hurae! Engari he pai ke ki te moumou.
Te nama take 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
Ihirangi waahi mo te tauira scrollspy. E pa ana tenei ki te nama 3-2. He taketake koe, kaore e taea te whakakapi. Po katoa e takaro ana, to waiata. Ko nga kotiro o California e kore e taea te whakakore. Ka rite ki te manu kahore he whare herehere. Kare he wehi inaianei, tukua kia noho noa, ka aroha ahau ki a koe ma te kore here. Ka kite ahau i te tuhi i runga i te pakitara. Ka taea e koe te haere i te ao engari kaore he mea e tata ana ki te takutai koura.
<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>
Tauira me te roopu-rarangi
Ka mahi ano a Scrollspy me .list-groups. Panukuhia te waahi ki te taha o te roopu rarangi ka matakitaki i te huringa o te akomanga kaha.
Te nama take 1
Ihirangi puri wahi mo te tauira rarangi-rōpū scrollspy. E pa ana tenei ki te nama 1. Kaua e mihi. Kare he wehi inaianei, tukua kia noho noa, ka aroha ahau ki a koe ma te kore here. I tera po o te Paraire. Kaua e whakama kinda ka whakatau ahau he ataahua. Te raumati i muri i te kura tuarua i to maua tutaki tuatahi. 'No te mea ko ia te puoro me te kaitoi. He aha? Tatari. I whakaaro ko ahau anake.
Te nama take 2
Ihirangi puri wahi mo te tauira rarangi-rōpū scrollspy. E pa ana tenei ki te nama 2. Ae, ka kanikani ia ki tana ake pao. Aue, kahore. Ko koe pea te mea nui rawa atu. E tama, he ahi ahi koe. He take pea ka kati nga tatau katoa. Whakatuwherahia to ngakau ka timata noa. Na très chic, yeah, he matarohia ia.
Te nama take 3
Ihirangi puri wahi mo te tauira rarangi-rōpū scrollspy. Ko tenei e pa ana ki te nama 3. Ka piki ake tatou. Kore rawa tetahi ki te kore tetahi, ka whakatauhia e matou. Kei te hikoi ahau i runga i te hau. I kii tetahi kua tangohia to moko. Inaianei kei te maanu ahau ano he pūrerehua. Ko te oro, he kiri karaka, he rite, ka huri ake kia taumaha ai. No te mea kua riro koe i ahau, ina kua riro koe i ahau. Me tahu noa e koe te rama kia whiti! Na ka tuki matou ki te boulevard. Ka rongo koe, he pepa kikokore. Ka kite ahau i nga mea katoa, ka kite ahau inaianei.
Te nama take 4
Ihirangi puri wahi mo te tauira rarangi-rōpū scrollspy. Ko tenei e pa ana ki te nama 4. Te raumati i muri i te kura tuarua i te wa tuatahi i tutaki ai matou. Kare he wehi inaianei, tukua kia noho noa, ka aroha ahau ki a koe ma te kore here. Ka wera te kiri kihia e te ra, ka rewa matou i to popsicle. Ma tenei aroha ka rere koe.
<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>
Whakamahinga
Ma nga huanga raraunga
Kia ngawari te taapiri i te whanonga scrollspy ki to whakatere pae runga, taapiri atu data-spy="scroll"ki te huānga e hiahia ana koe ki te tutei (te nuinga ko te <body>). Na ka taapirihia te data-targethuanga me te ID, te karaehe ranei o te huānga matua o tetahi .navwaahanga Bootstrap.
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 te JavaScript
Whai muri i te taapiri position: relative;i to CSS, waeahia te scrollspy ma te JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
Ko nga whaainga ID ka taea te whakatau
Ko nga hononga Navbar me whai tohu id ka taea te whakatau. Hei tauira, <a href="#home">home</a>me rite ki tetahi mea i roto i te DOM rite <div id="home"></div>.
Ko nga huānga kore - :visiblewhaainga i arohia
Ko nga huānga whainga kaore i te :visiblerite ki te jQuery ka kore e arohia, ka kore rawa e miramirahia o raatau taonga nav.
Nga tikanga
.scrollspy('refresh')
Ina whakamahi i te scrollspy me te taapiri, te tango ranei i nga huānga mai i te DOM, me waea koe ki te tikanga whakahou penei:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Ka whakangaro i te panuku o tetahi huānga.
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset="".
| Ingoa | Momo | Taunoa | Whakaahuatanga |
|---|---|---|---|
| whakatiki | tau | 10 | Pika hei whakatiki mai i runga i te tatau i te waahi o te panuku. |
| tikanga | aho | auto | Ka kimihia ko tehea tekiona kei roto te huānga torotoro. autoka kowhiria te huarahi tino pai ki te tiki taunga panuku. offsetka whakamahi i te jQuery offset tikanga ki te tiki taunga panuku. positionka whakamahi tikanga tūnga jQuery ki te tiki taunga panuku. |
| whainga | aho | ahanoa jQuery | huānga DOM | Tautuhi huānga ki te tono Scrollspy mono. |
Nga huihuinga
| Momo Takahanga | Whakaahuatanga |
|---|---|
| activate.bs.scrollspy | Ka puhipuhi tenei takahanga ki te huānga panuku i nga wa katoa ka whakahohehia he mea hou e te scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})