in English

Scrollspy

Ntlafatsa ka boiketsetso ho tsamaea ha Bootstrap kapa lethathamo la likarolo tsa sehlopha ho ipapisitse le boemo ba moqolo ho bontša hore na ke sehokelo sefe se sebetsang hona joale boema-kepe.

Kamoo e sebetsang kateng

Scrollspy e na le litlhoko tse 'maloa hore e sebetse hantle:

  • Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .
  • E tlameha ho sebelisoa ho karolo ea Bootstrap nav kapa sehlopha sa lenane .
  • Scrollspy e hloka position: relative;ntho eo u ntseng u e hloela, hangata <body>.
  • Ha u hloela lintho tse ling ntle le <body>, etsa bonnete ba hore u na le heightsete le overflow-y: scroll;ho sebelisoa.
  • Liankora ( <a>) lia hlokahala 'me li tlameha ho supa ntho e nang le eona id.

Ha e kengoa tšebetsong ka katleho, sehlopha sa hau sa nav kapa lethathamo se tla nchafatsa ka nepo, se tsamaisa .activesehlopha ho tloha nthong e 'ngoe ho ea ho se seng ho latela lipehelo tse amanang le tsona.

Mohlala ho navbar

Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintho tse theoleloang li tla totobatsoa hape.

@mafura

Likahare tsa sebapali bakeng sa mohlala oa scrollspy. U na le meralo e metle ka ho fetesisa. Litempe tsa li-passport, o na le batho bohle. E ntle, e ncha, e bohale, re e tšoere e notletsoe. Ha ho mohla nkileng ka rera hore ka letsatsi le leng ke tla be ke lahlehetsoe ke uena. O ja pelo ya hao. Kako ea hau ke ea bokahohle, mohato o mong le o mong ke boselamose. Ke bolela bao, ke bolela hore ke yena. Dumelang baratuwa ha re nkeng leeto. Eba le bosiu feela joalo ka la 4 Phupu! Empa u ka mpa ua senyeha.

@mdo

Likahare tsa sebapali bakeng sa mohlala oa scrollspy. Hobane ke setsi sa pokello ea nalane le setaki. (Ke kamoo re etsang sena) Kahoo o batla ho bapala ka boselamose. Kahoo etsa bonnete ba hore pele u mpha tsohle. Ke tsamaya, ke tsamaya moyeng (bosiung bona). Tlohela puo, u utloile tsohle, nako ea ho tsamaea.

ngoe

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

Likahare tsa sebapali bakeng sa mohlala oa scrollspy. Haeba u batla ho tantša, haeba u e batla kaofela, ua tseba hore ke 'na ngoanana eo u lokelang ho mo bitsa. Ke tsamaee sefefong. Kahoo e re ke u fumane ka sutu ea hau ea tsoalo. Eane eo ke sa khonang ho mo boloka. Labohlano le fetileng bosiu, ee, ke nahana hore re tlotse molao, re lula re re re tla emisa. Hobane o monyane oa Yoko, 'me o batla a le monyane oa 'Oh no'. Ke batla lerotholi la mohlahare ', eye poppin', head turnin', body shockin'. Ee, re ekelitse likarete tsa rona tsa mokoloto mme ra lelekoa ka ntle ho bareng.

Le litaba tse ling tsa setšoantšisi, bakeng sa tekanyo e ntle.

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

Mohlala ka sehlaha nav

Scrollspy e boetse e sebetsa le sehlaha sa .navs. Haeba sehlaha .navse le teng .active, batsoali ba sona le bona ba tla .active. Tsamaisetsa sebaka se haufi le navbar 'me u shebelle phetoho ea sehlopha se sebetsang.

Ntlha ea 1

Likahare tsa sebapali bakeng sa mohlala oa scrollspy. Ena e amana le ntlha ea 1. E u isa holimo ka limaele, holimo haholo, hobane o na le pososelo e le 'ngoe ea machaba. Ho na le moeti betheng ea ka, ho na le ho otla ka hlooho ea ka. Oho, che. Bophelong bo bong ke ne ke tla etsa hore o lule. Hobane 'na, ke khona ho etsa eng kapa eng. Ho lokelwa ntwa ya ka ya moqhaka. E ne e utsoa joala ba batsoali ba hao le ho hloella marulelong. Molumo, 'mala o mosehla, o itokisitse, o o phahamise o etsa hore o be boima. Lerato la hae le tšoana le sethethefatsi. Ke nahana hore ke lebetse hore ke na le boikhethelo.

Ntlha ea 1-1

Likahare tsa sebapali bakeng sa mohlala oa scrollspy. Sena se amana le ntlha ea 1-1. U na le meralo e metle ka ho fetesisa. Litempe tsa li-passport, o na le batho bohle. E ntle, e ncha, e bohale, re e tšoere e notletsoe. Ha ho mohla nkileng ka rera hore ka letsatsi le leng ke tla be ke lahlehetsoe ke uena. O ja pelo ya hao. Kako ea hau ke ea bokahohle, mohato o mong le o mong ke boselamose. Ke bolela bao, ke bolela hore ke yena. Dumelang baratuwa ha re nkeng leeto. Eba le bosiu feela joalo ka la 4 Phupu! Empa u ka mpa ua senyeha.

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

Likahare tsa sebapali bakeng sa mohlala oa scrollspy. Sena se amana le ntlha ea 3-2. U oa mantlha, u ke ke ua nkeloa sebaka. Bosiu bohle ba ntse ba bapala, pina ya hao. California banana re ke keng ra latoloa. Joalo ka nonyana e se nang lesaka. Ha ho na tšabo hona joale, tlohela 'me u lokolohe, ke tla u rata ntle le maemo. Ke bona mongolo o leboteng. U ka tsamaea lefatšeng empa ha ho letho le atamelang lebōpong la khauta.

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

Mohlala le sehlopha-sehlopha

Scrollspy e boetse e sebetsa le .list-groups. Tsamaisetsa sebaka se haufi le sehlopha sa lenane mme o shebelle ho fetoha ha sehlopha se sebetsang.

Ntlha ea 1

Likahare tsa sebapali bakeng sa mohlala oa sehlopha sa scrollspy. Ena e amana le ntlha ea 1. Ha u hloke ho kōpa tšoarelo. Ha ho na tšabo hona joale, tlohela 'me u lokolohe, ke tla u rata ntle le maemo. Bosiu bo fetileng ba Labohlano. Se be motho ea lihlong, ke tla be ke le motle. Lehlabula ka mor'a sekolo se phahameng ha re qala ho kopana. Hobane ke setsi sa pokello ea nalane le setaki. Eng? Ema. Ke ne ke nahana hore ke 'na mokhelo.

Ntlha ea 2

Likahare tsa sebapali bakeng sa mohlala oa sehlopha sa scrollspy. Ena e amana le ntlha ea 2. E, o tantša ka pina ea hae. Oho, che. O ka be o bile moholo ka ho fetisisa. Hobane, ngoana, u li-firework. Mohlomong lebaka ke hobane'ng ha menyako eohle e koetsoe. Bula pelo ea hau 'me u e lumelle hore e qale. Kahoo très chic, ee, ke oa khale.

Ntlha ea 3

Likahare tsa sebapali bakeng sa mohlala oa sehlopha sa scrollspy. Ena e amana le ntlha ea 3. Re ea holimo le holimo. Ha ho mohla e mong ntle le e mong, re ile ra etsa selekane. Ke tsamaya moyeng. Motho e mong o itse o tlositse tattoo ea hau. Joale ke phaphamala joalo ka serurubele. Molumo, 'mala o mosehla, o itokisitse, o o phahamise o etsa hore o be boima. Hobane hang ha u le oa ka, hang ha u le oa ka. U tlameha feela ho hotetsa leseli 'me u le lumelle hore le khanye! Kahoo re otla boulevard. Na u kile ua ikutloa, u utloa pampiri e le lesesaane hakana. Ke e bona kaofela, ke e bona joale.

Ntlha ea 4

Likahare tsa sebapali bakeng sa mohlala oa sehlopha sa scrollspy. Ena e amana le ntlha ea 4. Lehlabula ka mor'a sekolo se phahameng ha re qala ho kopana. Ha ho na tšabo hona joale, tlohela 'me u lokolohe, ke tla u rata ntle le maemo. Letlalo le sunang ke letsatsi le chesa haholo re tla qhibilihisa popsicle ea hau. Lerato lena le tla o etsa levitate.

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

Tšebeliso

Ka litšobotsi tsa data

Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea topbar ea hau, eketsa nthong data-spy="scroll"eo u batlang ho e hloela (haholo-holo ena e tla ba eona <body>). Ebe u eketsa data-targettšobotsi ka ID kapa sehlopha sa karolo ea motsoali ea karolo efe kapa efe ea 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>

Ka JavaScript

Kamora ho kenya position: relative;CSS ea hau, letsetsa scrollspy ka JavaScript:

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

Lipehelo tsa ID tse rarollehang lia hlokahala

Lihokelo tsa Navbar li tlameha ho ba le lipehelo tsa id tse rarollehang. Ka mohlala, e <a href="#home">home</a>tlameha ho lumellana le ntho e 'ngoe e DOM e kang <div id="home"></div>.

Lintho tse sa lebelloang :visibleli hlokomolohuoe

Lintlha tse reriloeng tse sa lumellaneng :visiblele jQuery li tla hlokomolohuoa 'me lintho tse tsamaisanang le tsona li ke ke tsa hlakisoa.

Mekhoa

.scrollspy('refresh')

Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:

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

.scrollspy('dispose')

E senya scrollpy ea element.

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset="".

Lebitso Mofuta Ea kamehla Tlhaloso
offset palo 10 Lipikseli tsa ho theola ho tloha holimo ha ho baloa boemo ba ho tsamaisa.
mokhoa khoele koloi E fumana hore na karolo ea spied e ho karolo efe. autoe tla khetha mokhoa o motle oa ho fumana likhokahano tsa meqolo. offsete tla sebelisa mokhoa oa jQuery offset ho fumana likhokahano tsa moqolo. positione tla sebelisa mokhoa oa boemo ba jQuery ho fumana likhokahano tsa moqolo.
sepheo khoele | ntho ea jQuery | Karolo ea DOM E hlakisa ntho eo u ka e sebelisang ho sebelisa plugin ea Scrollspy.

Liketsahalo

Mofuta oa Ketsahalo Tlhaloso
kenya tshebetsong.bs.scrollpy Ketsahalo ena e sebetsa ho karolo ea moqolo neng kapa neng ha ntho e ncha e kengoa tšebetsong ke scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})